Html 如何使 div 扩展以适应可用的垂直空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2351674/
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
How to make a div expand to fit available vertical space?
提问by vilhalmer
I'm looking for a way to make the div that contains my main page content to expand to fit the space left after adding my header and footer. The HTML is laid out like so:
我正在寻找一种方法来使包含我的主页内容的 div 展开以适应添加页眉和页脚后留下的空间。HTML 的布局如下：
<div id="wrapper">
<div id="header-wrapper">
<header>
<div id="logo-bar"></div>
</header>
<nav></nav>
</div>
<div id="content"></div>
</div>
<div id="footer-wrapper">
<footer></footer>
</div>
It's designed so that the footer is always past the bottom of the page by setting the min-height of #wrapper to 100%. The problem is that #content doesn't expand to fill the empty space inside the #wrapper, making it difficult to get the look I want. How can I make it do that?
它的设计目的是通过将#wrapper 的最小高度设置为 100%，使页脚始终超出页面底部。问题是#content 不会扩展以填充#wrapper 内的空白空间，因此很难获得我想要的外观。我怎样才能让它这样做？
回答by Zyphrax
EDIT:
Why not use top and bottom. Here's a full example.
You can tweak the top and bottom values, to optimize your header/footer placement.
编辑：
为什么不使用顶部和底部。这是一个完整的例子。
您可以调整顶部和底部值，以优化页眉/页脚位置。
<html>
<head>
<style type="text/css">
BODY {
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
height: 100%;
width: 100%;
}
#header-wrapper {
position: absolute;
background-color: #787878;
height: 80px;
width: 100%;
}
#content {
position: absolute;
background-color: #ababab;
width: 100%;
top: 80px;
bottom: 50px;
}
#footer-wrapper {
position: absolute;
background-color: #dedede;
height: 50px;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo-bar">Logo</div>
</div>
<div id="nav"></div>
</div>
<div id="content">Content</div>
<div id="footer-wrapper">
<div id="footer">Footer</div>
</div>
</div>
</body>
</html>
回答by Patrick
A good article for footers is at A List Apart: http://www.alistapart.com/articles/footers/
一篇关于页脚的好文章是在 A List Apart：http: //www.alistapart.com/articles/footers/
It has the actual example of how you position a footer at the bottom with the expanding content div.
它有一个实际示例，说明如何使用扩展内容 div 在底部放置页脚。
回答by LuckyLuke82
This solution solves scrolling problems. When page is oversized, your footer is placed 2 new lines from the whole content:
此解决方案解决了滚动问题。当页面过大时，您的页脚会在整个内容中放置 2 行：
<style>
#container {
position: relative;
height: 100%;
}
#footer {
position: absolute;
bottom: 0;
}
</style>
</HEAD>
<BODY>
<div id="container">
<h1>Some heading</h1>
<p>Some text you have</p>
<br>
<br>
<div id="footer"><p>Rights reserved</p></div>
</div>
</BODY>
</HTML>
