html - DIV 100% 高度，带页脚和页眉，动态

Question

我已经搜索了几个小时来寻找 100% 高度 div 问题的良好解决方案。我现在尝试了不同的代码，但其中一些并没有真正帮助(对我而言)，因为我需要一个响应迅速且支持 IE8+ 的解决方案。所以一些有用的标签，例如“calc()”函数或“flexbox”是无效的。

我创建了一个 sample page , 向您展示问题。页脚应位于当前窗口大小的底部。两个内容 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;
}

很抱歉有那么多条件，但这是我必须适应的环境。 (-;

最好的问候，滑雪。

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>

希望对你有帮助