CSS：使中间div占据窗口高度的整个自由空间（最小高度）

Question

任何人都可以帮助我定位我的内容块吗？ 如果有很多内容看起来不错，但是当窗口高于内容块时则不行。 Actualy我需要在我的照片上使用“内容”块来填充所有自由空间（高度），这就是为什么页脚会粘在底部。

我有下一个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有背景图像，所以我不能只是将页脚放在底部，位置是：绝对的。

我将HTML发布到预览：jsfiddle。

UPD：缩放实时预览：

Answer 1

您必须将html和body height属性设置为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;

}

Answer 2

这是updated fiddle

这方面的关键是将身体设置为绝对定位到视口。从那里，如果你想允许它像往常一样滚动，那么你会将页脚的位置更改为固定，将内容div的CSS更改为：

body>div>div{width:400px;height:100%;margin:0 auto;background-color:#FFF;
position:absolute; top: 0; bottom: 0; overflow-y:auto;}

我已将您的内容div包装在另一个中，以允许自动边距使页面居中，然后将页脚的大小调整为边框，以便考虑您添加到其中的填充。