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



* {
  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来放置所有页脚。
但!内容是动态的;)

当我获得全部内容时,它可以很好地工作,但是如果我缩小,则爆炸!

我绝对需要float left#menu#contenu原因,可以通过按钮单击事件将其折叠。

我可以将代码放到折叠中,但是它可以在这种状态下工作,所以...

谢谢你们

最佳答案

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



* {
  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>

10-05 21:07
查看更多