Html 使用 CSS 将 div 设置为剩余高度，上面和下面的高度 div 未知
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8555820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set div to remaining height using CSS with unknown height divs above and below
提问by danial
Is it possible to make the wrapper fill the window height (no scrolling) and the center div scrollable without messing around with pixels and javascript?
是否可以使包装器填充窗口高度（无滚动）并且中心 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>
Basically I want the header to be visible at the top and the footer to be always visible at the bottom and have a scrollable content in the center which occupies the remaning height.
The header, footer and center divs' heights are all unknown (no set px or %, i.e. variable font-size or padding). Is it possible with pure CSS?
基本上，我希望页眉在顶部可见，页脚始终在底部可见，并在中心有一个可滚动的内容，占据剩余高度。
页眉、页脚和中心 div 的高度都是未知的（未设置 px 或 %，即可变字体大小或填充）。纯CSS可以吗？
采纳答案by danial
A cross-browser solution derived from Dan Dascalescuanswer:
来自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>回答by Dan Dascalescu
2014 UPDATE: The modern way to solve this layout problem is to use the flexboxCSS model. It's supported by all major browsers and IE11+.
2014 更新：解决这个布局问题的现代方法是使用flexboxCSS 模型。所有主流浏览器和 IE11+ 都支持它。
2012: The correct way to do this with CSS alone is to use display: tableand display: table-row. These are supported by all major browsers, starting with IE8. This is notusing tables for display. You'll use divs:
2012：单独使用 CSS 执行此操作的正确方法是使用display: table和display: table-row。从 IE8 开始，所有主要浏览器都支持这些。这不是使用表格进行显示。您将使用 div：
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow; /* just to make sure nothing bleeds */
}
.header {
display: table-row;
background: gray;
}
.content {
display: table-row; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.footer {
display: table-row;
background: lightgray;
}<div class="wrapper">
<div class="header">
<h1>Header</h1>
<p>Header of variable height</p>
</div>
<div class="content">
<h2>Content that expands in height dynamically to adjust for new content</h2>
Content height will initially be the remaining
height in its container (<code>.wrapper</code>).
<!-- p style="font-size: 4000%">Tall content</p -->
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>That's it. The divs are wrapped as you'd expect.
就是这样。div 已按您的预期包装。
回答by Kevrone
So what you are talking about is a sticky footer. I went and did some more research and here is what I have for you.
所以你说的是粘性页脚。我去做了一些更多的研究，这就是我为你准备的。
<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>
This will give you a sticky footer. The key is position:fixed and bottom:0px; Unfortunately this means it also hovers above any content in the scrollview. So far there seems to be only Javascript to figure this out but I will keep looking.
这会给你一个粘性页脚。关键是位置：固定和底部：0px；不幸的是，这意味着它也会悬停在滚动视图中的任何内容上方。到目前为止，似乎只有 Javascript 可以解决这个问题，但我会继续寻找。
