CSS 绝对定位 100% height less padding without JS答案

【问题标题】：CSS Absolute positioning 100% height less padding without JSCSS 绝对定位 100% height less padding without JS
【发布时间】：2012-07-30 21:18:35
【问题描述】：

下面的代码有一个 DIV 需要放在容器的顶部，另一个放在底部，然后内容需要从中间穿过。

<div style="position:absolute; top:0; width:100%; height:40px"></div>

<div class="howto"></div>

<div style="position:absolute; bottom:0; width:100%; height:40px"></div>

所以我们不知道包含 DIV 的高度。在没有JS的情况下，howto类的div如何使容器DIV的高度减去顶部和底部绝对定位的div的高度，从而包含这2个DIV之间的内容。

【问题讨论】：

标签： css height absolute

【解决方案1】：

对于您希望完成的事情，这是一种可能的解决方案：

@tinkerbin：http://tinkerbin.com/QsaCPgR6

HTML：

<div class="container">
    <div class="header"></div>

    <div class="howto">
      Has height set to auto. You may change that if you want to.
    </div>

    <div class="footer"></div>
</div>

CSS：

.container {
  position: relative;
  padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}

.header,
.footer {
  position: absolute;
  height: 40px;
  width: 100%;
}

.header {
  top: 0;
}

.footer {
  bottom: 0;
}

.howto {
  height: /*specifiy one if you wish to*/;
}

【讨论】：

【解决方案2】：

据我所知，没有一种纯 CSS 方法可以在没有 JS 的情况下完成您想要做的事情。

查看之前关于 SA 的帖子：

Make a div fill the height of the remaining screen space

【讨论】：