Html Div 展开以在视觉上填充垂直空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10464716/
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
Div Expand to Visually Fill Vertical Space
提问by Jon
I have a page that has a header, content, and footer. The header and footer are of fixed height, and I'd like the content to adjust its height so that it fits dynamically between the header and footer. I am planning to put a background-image in my content, so it is critical that it actually fills the rest of the unoccupied vertical space.
我有一个包含页眉、内容和页脚的页面。页眉和页脚的高度是固定的，我希望内容调整其高度，使其动态地适应页眉和页脚之间。我打算在我的内容中放置一个背景图像，因此它实际上填充其余未占用的垂直空间是至关重要的。
I used the Sticky Footerapproach to ensure that the footer remains on the bottom of the page. This however does not make the content span the entire height of the remaining space.
我使用粘性页脚方法来确保页脚保留在页面底部。然而，这不会使内容跨越剩余空间的整个高度。
I have tried several solutions which involved me adding height:100%, height:auto; position:relativebut it did not work.
我尝试了几种涉及我添加的解决方案，height:100%, height:auto; position:relative但没有奏效。
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#wrapper #content {
background-color: pink;
width: 400px;
height: 100%;
margin: 0 0 -30px 100px;
padding: 25px 30px 25px 30px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>采纳答案by Gabriel Syme
Try changing your css to this:
尝试将您的 css 更改为：
html,
body {
height: 100%;
background-color: yellow;
}
header {
width: 100%;
height: 150px;
background-color: blue;
}
header nav ul li {
display: inline;
padding: 0 30px 0 0;
float: left;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -30px 0;
/* the bottom margin is the negative value of the footer's height */
position: relative;
}
#content {
background-color: pink;
width: 400px;
padding: 25px 30px 25px 30px;
position: absolute;
bottom: 30px;
top: 150px;
margin-left: 100px;
}
footer {
margin: -30px 0 0 0;
width: 100%;
height: 30px;
background-color: green;
}<div id="wrapper">
<header>
<div id="logo"></div>
<nav>
<ul>
<li>About</li>
<li>Menu</li>
<li>Specials</li>
</ul>
</nav>
</header>
<div id="content">
content
<br>goes
<br>here
</div>
</div>
<footer>footer</footer>You probably don't want to be setting the width, padding, margins, ect. of the wrapper. Also, with absolute positioning you can pull the bottom and top of the content to where you want them.
您可能不想设置宽度、填充、边距等。的包装。此外，通过绝对定位，您可以将内容的底部和顶部拉到您想要的位置。
Here's what you are after, I think.
这就是你所追求的，我想。
回答by e.w. parris
The trick about height:100% is that it requires all of the parent containers to be have their heights set as well. Here's an html example
关于 height:100% 的技巧是它要求所有父容器也设置它们的高度。这是一个 html 示例
<html>
<body>
<div id="container">
</div>
</body>
</html>
in order for the container div with a height set to 100% to expand dynamically to the height of the window you need to make sure that the body and html elements have their heights set to 100% as well. so...
为了让高度设置为 100% 的容器 div 动态扩展到窗口的高度，您需要确保 body 和 html 元素的高度也设置为 100%。所以...
html
{
height: 100%;
}
body
{
height: 100%;
}
#container
{
height: 100%;
}
would give you a container that expands to fit your window. then if you need to have footer or header that floats above this window you can do so with z indexing. This is the only solution I've found that fills the vertical height dynamically.
会给你一个扩展以适应你的窗口的容器。然后，如果您需要在此窗口上方浮动页脚或页眉，您可以使用 z 索引来实现。这是我发现的唯一一个动态填充垂直高度的解决方案。
回答by owencm
I'm providing a slightly more general solution so it is more useful for others reading this answer and wondering how to apply it to their site.
我提供了一个稍微更通用的解决方案，因此对于阅读此答案并想知道如何将其应用于他们的网站的其他人来说更有用。
Assuming you have three divs:
假设你有三个 div：
<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>
where #header is fixed and may have variable height, #contents should consume all remaining vertical space and #footer is fixed and may have variable height you can do:
其中#header 是固定的并且可能具有可变的高度，#contents 应该消耗所有剩余的垂直空间，而#footer 是固定的并且可能具有可变的高度，您可以这样做：
/* Note you could add a container div instead of using the body */
body {
display: flex;
flex-direction: column;
}
#header {
flex: none;
}
#contents {
flex: 1;
height: 100%;
overflow-y: scroll;
}
#footer {
flex: none;
}
Note that this will allow the contents to scroll vertically to show it's whole contents.
请注意，这将允许内容垂直滚动以显示其全部内容。
You can read more about display:flex here.
您可以在此处阅读有关 display:flex 的更多信息。
回答by Stan Lin
I spend several hours trying to figure this out too and finally have a robust solution without hacks. However, it requires CSS3, which requires a modern browser to support it. So, if this constraint works for you, then I have a real solution for you that works.
我也花了几个小时试图解决这个问题，最终有了一个没有黑客攻击的强大解决方案。但是，它需要 CSS3，这需要现代浏览器来支持。所以，如果这个约束对你有用，那么我有一个真正有效的解决方案。
http://jsfiddle.net/u9xh4z74/Copy this code into your own file if you need proof, as the JSFiddle will not actually render the flexbox correctly as embedded code.
http://jsfiddle.net/u9xh4z74/如果需要证明，请将此代码复制到您自己的文件中，因为 JSFiddle 实际上不会将 flexbox 正确呈现为嵌入代码。
Basically, you need to - set the target container to 100% height, which you seem to already know - the parent container you set display: flex and flex-direction: vertical (you'll see in the JSFiddle I've also included the alternate styles that do the same thing but are needed for cross browser support) - you can let the header and footer be their natural heights and dont need to specify anything in that regard - in the container you want to fill up the remaining space, set flex: 1. You're set! You'll see it works exactly as you semantically have intended. Also in the JSFiddle, I included overflow: auto to demonstrate that if you have even more text than the screen can handle, scrolling works as you would want it to.
基本上，您需要 - 将目标容器设置为 100% 高度，您似乎已经知道了 - 您设置的父容器 display: flex 和 flex-direction: vertical（您将在 JSFiddle 中看到我还包括做同样事情但需要跨浏览器支持的替代样式） - 您可以让页眉和页脚成为它们的自然高度，并且不需要在这方面指定任何内容 - 在您想要填充剩余空间的容器中，设置flex: 1. 你准备好了！您会看到它完全按照您的语义预期工作。同样在 JSFiddle 中，我包含了 overflow: auto 以证明如果您的文本比屏幕可以处理的还要多，滚动就会按照您的意愿工作。
<div style="display:flex; flex-direction:vertical;">
...header(s)...
<div style="flex: 1; overflow: auto;">
As much content as you want.
</div>
...footer(s)...
</div>
As a side note, I pursued the option of trying to do this same thing using display: table. It works just fine as well, except that overflowed content does not work as you would expect, instead overflowed content simply expands the container to the size of the content, which I'm pretty sure is not what you want. Enjoy!
作为旁注，我尝试使用 display: table 尝试做同样的事情。它也能正常工作，只是溢出的内容不能像您期望的那样工作，相反，溢出的内容只是将容器扩展到内容的大小，我很确定这不是您想要的。享受！
回答by clearfix
Use display:table and display:table-row Set height:0 for normal divs and height:auto for div that should fill vertical space. Insert a div with {height:100%; overflow-y:auto} into the vertical filler to if the containers height shouldn't expand beyond its preset height. Behold the power of display:table!
使用 display:table 和 display:table-row 为普通 div 设置 height:0，为应该填充垂直空间的 div 设置 height:auto。插入一个带有 {height:100%; 的 div overflow-y:auto} 到垂直填充器中，如果容器高度不应该超出其预设高度。看看显示的力量：桌子！
<div style="height:300px;">
<div style="display:table; height:100%; width:100%;border: 1px solid blue;">
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
Hello
</div>
<div style="display: table-row; height:auto; padding:2px; background-color:green;">
<div style="height:100%; overflow: auto;">
<div style="height: 500px"></div>
</div>
</div>
<div style="display: table-row; height:0; padding:2px; background-color:yellow;">
Gbai
</div>
</div>
</div>
回答by Jirka Kop?iva
There is no 100% height from 100% continer height exactly. You can't solve it this way. Likewise while using mix of height + margin + padding. This is way straight to hell. I suggest you to take a look for tutorials which are sloving this page layout.
完全没有 100% 的高度与 100% 的容器高度。你不能这样解决。同样，在混合使用高度 + 边距 + 填充时。这是直接下地狱的方式。我建议你看看那些喜欢这个页面布局的教程。
