CSS绝对定位100%高度减少填充没有JS

时间:2012-07-30 11:36:26

标签: css height absolute

以下代码的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的高度,以便包含这两个DIV之间的内容。

2 个答案:

答案 0 :(得分: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*/;
}

答案 1 :(得分:0)

据我所知,没有纯粹的CSS方法可以在没有JS的情况下做你想做的事。

请参阅此前关于SA的帖子:

Make a div fill the height of the remaining screen space