html - CSS:使中间div占用窗口高度(最小高度)的整个可用空间

Question

谁能帮我定位我的内容 block ？如果有很多内容看起来不错，但当窗口高于内容 block 时就不行了。实际上，我需要我图片上的“内容” block 占用所有可用空间(高度)，这就是页脚粘在底部的原因。

我有下一个 HTML 标记:

<div>
    <header></header>
    <nav class="breadcrumbing"></nav>
    <section class="left_nav"></section>
    <section class="content"></section>
    <footer></footer>
</div>

使用这个 CSS:

html,body{width:100%;margin:0;padding:0;}
body{background-color:#629302}
body>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;}
body>div>header{height:50px;background-color:#9dc155}
body>div>nav.breadcrumbing{display:block;height:10px;margin:0;padding:0;}
body>div>section.left_nav{width:172px;margin:8px 20px;float:left;background-color:#cdef88}
body>div>section.content{width:168px;float:left;}
body>div>footer{padding:19px 19px 22px;background-color: #e58b04;clear:left;}

我已经尝试过来自 Is it possible to get a div's height to be 100% of an available area? 的答案和一些相同的问题，但没有运气。另外，我的实时 HTML 有背景图像，所以我不能用 position:absolute 将页脚放在底部。

我发布我的 HTML 来预览:jsfiddle .

UPD: 缩放实时预览:

Answer 1

您必须设置 html和 body height属性(property)为100%；然后你可以设置 footer高度为 100%；这将告诉主要容器元素 100% 的真正含义，它会起作用。

Your updated fiddle

基本上，这些是您必须添加的规则:

html, body {
    height: 100%;
}

footer {
    height: 100%;
}

更新

好吧，我可能误解了你的要求，这是一个更清晰的例子:

Working example

基本上，您在此示例中另外做的是让您的包装元素 display:table用height: 100% , 然后你就可以制作你的 footer显示为 table-row .

重要说明:此解决方案使用 display-table which is compatible only for IE8+ .如果支持 IE7 对您来说是个问题，那么您有两个我能想到的解决方案:

1. 要么使用固定宽度的页脚，将其推到内容下方，然后使用负值 margin 的组合将其拉回。和 padding .

2. 或者您通过使用一些 javascript 将页脚放在适当的位置来回退以支持旧版浏览器。

这是代码的分解:

HTML

<div class="wrapper">
    <header></header>
    <section class="main-content">
      {child elements of your main-content area}
    </section>
    <footer></footer>
</div>

CSS

html, body { 

  height: 100%;
  margin: 0;

}

.wrapper { 

  display: table;
  margin:  0 auto;
  height:  100%;

}

.main-content { 

  display: table-row;
  height: 100%;

}

footer { 

  display: table-row;

}