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

Posted 2023-03-21

【中文标题】菜单和内容 div 向左浮动并带有粘性页脚 -> 高度 100%

【英文标题】：Menu and Content div float left with a sticky footer -> height 100%

【发布时间】：2016-01-04 13:58:57

【问题描述】：

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

* 
  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 原因，可以通过按钮单击事件折叠。

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

谢谢大家

【参考方案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>

【讨论】：

欢迎您的回答。在我的示例中，我需要将“#contenu”（白色部分）放到页脚。 div 的高度可以相等；）但我的要求是有正确的 div，即 float:left 高度为 100；真的...很难做到这一点我尝试举这个例子，但不使用我的浮动 div... (ryanfait.com/sticky-footer)

嗨，在这种情况下，在我的代码中，用<div> 包装#contenu 中的内容并将其设置为min-height:550px;。您可以根据需要调整此最小高度。

您好，谢谢您，但如果我们需要完整的动态内容；）我很确定要正确执行此操作是不可能的...

否，高度会自动增加。我们只设置min-height。当动态内容的高度超过550px 时，div 的高度也会相应调整。

我知道 ;) 但我不好解释。我们可以有一些高度为 1545878px 的弹出窗口，如果我们在内容中没有这个高度，我们会生成黑色背景。如果我们缩小没有内容，同样的情况。最小高度只是一种安全