DIV 100％高度，带页脚和页眉，动态

Question

我已经搜索了几个小时，以找到100％高度div问题的好解决方案。 我现在尝试了不同的代码，但是由于我需要一个响应式的IE8 +支持解决方案，因此其中一些对我而言并没有真正的帮助。 因此，一些有用的标签（例如“ calc（）”函数或“ flexbox”）无效。

我创建了一个示例页面 ，向您展示问题。 页脚应位于窗口当前大小的底部。 两个内容div都应具有当前内容屏幕的完整高度，并且只要内容经过当前屏幕，就不会有任何滚动条。 如果内容超过当前屏幕高度，则页脚不应固定，而应“向下”移动。

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

当前页面的构建如下：

<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

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

对于解决方案本身，我从包装器中排除了页脚。 表示主容器的内容是包装程序DIV（包括所有内容）和页脚DIV（包括页脚）。 对于包装的底部元素，我添加了padding-bottom属性，对于页脚本身，添加了负margin-top属性，该属性等于页脚的高度。 因此，如果内容不引起分页符，则页脚向上移动；如果内容太多，则页脚向下移动。 您可以在这里找到解决方案本身。

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;
}

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