Div 100％高度，带有页脚和标头，动态

Question

我现在已经搜索了几个小时，以解决100％高度DIV问题的良好解决方案。我现在尝试了不同的代码，但是其中一些代码并不是很有帮助（在我的情况下），因为我需要一个响应且IE8 支持解决方案。因此，一些有用的标签，例如" calc（）"函数或" flexbox"是无效的。

我创建了一个示例页面，以向您展示问题。页脚应位于窗户当前大小的底部。这两个内容divs都应具有当前内容屏幕的全高度，只要内容遍布当前屏幕，就不会有任何滚动条。如果内容在当前的屏幕高度上生长，则不应修复页脚，并且应"向下"移动。

我的页面响应迅速，并使用Bootstrap3进行构建。因此，还有更多的行和列，但是基本构建如下所示。

当前页面的构建如下：

<div id="page">
  <div id="header">
    My menu 
  </div>
  <div id="content">
    <div class="" id="content_left">
      Some content here ...
    </div>
    <div id="content_right">
      Some content there ...
    </div>
  </div>
  <div id="footer">
    My footer
  </div>
</div>

CSS：

html, body 
{
  display: block;
  min-height:100%; 
  height: 100%;
  padding:0; 
  margin:0;
}
#page
{
  margin: auto;
  max-width:500px;
  min-height: 100%;
  height: 100%;
  background: #333;
}
#header
{
  padding: 20px;
  background: #FF0;
}
#footer
{
  padding: 20px;
  background: #F0F;
  clear: both;
}
#content_left
{
  background: #0F0;
  float: left;
  width: 25%;
}
#content_right
{
  background: #0FF;
  width: 65%;
  float: left;
}
#content_left, #content_right
{
  padding: 10px;
}

对此有很多条件，但这是我必须使用的环境。（ - ;

最好的问候，skid。

Answer 1

您可以将其视为以下

检查此片段

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}
#page {
  margin: auto;
  width: 500px;
  position: relative;
  height: 100%;
  background: #333;
}
#wrapper {
  height: 100%;
  background: #A00;
}
#header {
  padding: 20px;
  background: #FF0;
}
#content_left {
  display: table-cell;
  background: #0F0;
  width: 25%;
}
#content_right {
  display: table-cell;
  background: #0FF;
  width: 75%;
}
#content_left,
#content_right {
  padding: 10px;
}
#footer {
  background: orange;
  display: table-cell;
  width: 500px;
}

<div id="page">
  <div id="wrapper">
    <div id="header">
      My menu
    </div>
    <div id="content">
      <div class="" id="content_left">
        Some content here ...
      </div>
      <div id="content_right">
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there.
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />Some content there ...
        <br />Some content there.
        <br />
      </div>
    </div>
    <div id="footer">
      My footer
    </div>
  </div>
</div>

希望这有帮助

Answer 2

感谢您的建议，但我解决了问题。我已经制作了一个新的CodePenio，包括Bootstrap 3框架。

对于解决方案本身，我将页脚排除在包装纸之外。意味着主要容器的内容是包装器Div（包括所有内容）和页脚Div（包括页脚）。对于包装器的底部元素，我添加了一个填充底部属性，对于页脚本身，减去边缘顶部属性等于页脚的高度。因此，页脚会向上移动，如果内容不会导致page opprable，如果有很多内容，则页脚会向下移动。解决方案本身您可以在此处找到。

html 看起来如下：

<div class="container">
  <div class="" id="wrapper">
    <div class="row" id="header">
      <div class="">My menu</div>
    </div>
    <div class="row" id="content">
      <div class="col-lg-4 col-sm-4" id="content_left">
        Some content here ...
      </div>
      <div class="col-lg-8 col-sm-8" id="content_right">
        Some content there...
      </div>
    </div>
  <div style="clear:both;"></div>
  </div>
  <div class="row" id="footer">
    <div>My footer</div>
  </div>
</div>

和 CSS ：

html,body
{
  width:100%;
  height:100%;
}
.container 
{
  display: table;
  height: 100%;
  min-height:100%;
  max-width: 500px;
  background: #333;
}
#wrapper
{
  height: 100%;
  min-height: 100%;
  background: #A00;
}
.content
{
  background: #A00;
}
#header 
{
  padding: 20px;
  background: #FF0;
}
#footer 
{
  clear: both;
  background: #F0F;
  min-height: 20px;
  margin-top: -20px;
}
#content_left 
{
  background: #0F0;
}
#content_right 
{
  background: #0FF;
}
#content_left,
#content_right 
{
  padding-bottom: 20px;
}

非常感谢您的帮助！（ - ：