使用CSS将div设置为剩余高度，上面和下面的div高度未知
使用CSS将div设置为剩余高度，上面和下面的div高度未知
提问于 2011-12-19 07:55:19
有没有可能让包装器填充窗口高度(没有滚动)，并且中间的div可滚动，而不会影响像素和javascript？
<div id="wrapper">
<h1>Header</h1>
<div id="center">
<div style="height:1000px">high content</div>
</div>
<div id="footer">Footer</div>
</div>基本上，我希望页眉在顶部可见，页脚始终在底部可见，并在中间有一个可滚动的内容，占据剩余的高度。
页眉、页脚和居中div的高度都是未知的(没有设置px或%，即可变字体大小或填充)。是否可以使用纯CSS？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-11-17 00:46:03
从Dan Dascalescu派生的跨浏览器解决方案答案：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height-row {
display: table-row;
height: 1px;
}
.l-fit-height-row-content {
/* Firefox requires this */
display: table-cell;
}
.l-fit-height-row-expanded {
height: 100%;
display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
height: 100%;
width: 100%;
}
@-moz-document url-prefix() {
.l-scroll {
/* Firefox requires this to do the absolute positioning correctly */
display: inline-block;
}
}
.l-scroll {
overflow-y: auto;
position: relative;
height: 1000px;
}
.l-scroll-content {
position: absolute;
top: 0;
bottom: 0;
height: 1000px;
min-height:100px;
}<div class="l-fit-height">
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Header</p>
</div>
</section>
<section class="l-fit-height-row-expanded">
<div class="l-fit-height-row-content l-scroll">
<div class="l-scroll-content">
<p>Foo</p>
</div>
</div>
</section>
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Footer</p>
</div>
</section>
</div>
Stack Overflow用户
发布于 2011-12-19 08:01:20
使用overflow:auto可以让你做到这一点。
Stack Overflow用户
发布于 2011-12-19 09:45:33
所以你正在谈论的是一个粘性的脚注。我去做了更多的研究，这是我为你准备的。
<div id="wrapper" style="height:100%">
<div id="header" style="float:none;"><h1>Header</h1></div>
<div style="overflow:scroll;float:none;height:auto;">high content</div>
<div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
</div>这将给你一个粘性的页脚。关键字是position:fixed和bottom:0px；不幸的是，这意味着它也会悬停在滚动视图中的任何内容之上。到目前为止，似乎只有Javascript能解决这个问题，但我会继续寻找。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8555820
复制相关文章
相似问题