菜单和内容 div 向左浮动并带有粘性页脚 -> 高度 100%

Question

我向社区提出了一个很好的问题。

* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  min-height: 100%;
}
#container {
  width: 100%;
  min-height: 100%;
  height: auto !important;
  margin: 0 auto -65px;
}
#header {
  width: 100%;
  height: 70px;
  background-color: red;
}
#menu {
  float: left;
  width: 20%;
  min-width: 220px;
  color: #ffffff;
  margin: 130px 0 0 4%;
}
#contenu {
  float: left;
  width: 66%;
  margin: 0;
  padding: 2% 5%;
  background: #ffffff;
  /* Need this div to take 100% */
  min-height: 100%;
  height: auto !important;
}
body {
  background-color: black;
  color: #ffffff;
}
#container_footer {
  width: 100%;
  height: 65px;
  background-color: black;
}

<div id="container">
  <div id="header">
    <div id="entete">
      <p>Some Text</p>
    </div>
  </div>
  <div id="menu">
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
    </ul>
  </div>
  <div id="contenu">
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
    </br>
  </div>
</div>
<div id="container_footer">
  <div id="footer">
    <p>some text</p>
  </div>
</div>

我的问题是： 我需要#contenu 把所有的地方都放在页脚。 但！内容是动态的；）

当我获得完整内容时，它运行良好，但如果我缩小...爆炸！

我绝对需要#menu 和#contenu 上的float left #menu 原因，可以通过按钮单击事件折叠。

我可以将代码用于崩溃，但它适用于这种状态，所以......

谢谢大家

Answer 1

请查看修改代码。据我了解您的要求，您需要两个部分的高度相同。现在两个部分的高度将相等。如果我错了，请纠正我。

* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
  min-height: 100%;
}
#container {
  width: 100%;
  min-height: 100%;
  height: auto !important;
  margin: 0 auto;
}
#header {
  width: 100%;
  height: 70px;
  background-color: red;
}
.table-display{
  display:table;
  width: 100%;
}
#menu {
  width: 20%;
  color: #ffffff;
 display: table-cell;padding: 20px;background:#57ad68;
}
#contenu {
  display: table-cell;
  padding: 20px;
  background: #ffffff; 
  color:#000;
}
body {
  background-color: black;
  color: #ffffff;
}
#container_footer {
  width: 100%;
  height: 65px;
  background-color: black;
}

<div id="container">
  <div id="header">
    <div id="entete">
      <p>Some Text</p>
    </div>
  </div>
  <div class="table-display">
   <div id="menu">
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
   </ul>
  </div>
  <div id="contenu">
    <div style="min-height:550px;">
      <p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p><p>Your Content</p>
   </div>
  </div>
</div>
</div>
<div id="container_footer">
  <div id="footer">
    <p>some text</p>
  </div>
</div>