Html 使 DIV 垂直填充页面的其余部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2898221/
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
Make DIV fill remainder of page vertically?
提问by erjiang
I have a Google Maps app that takes up most of the page. However, I need to reserve the top-most strip of space for a menu bar. How can make the map div automatically fill its vertical space? height: 100%does not work because the top bar will then push the map past the bottom of the page.
我有一个 Google 地图应用占据了大部分页面。但是，我需要为菜单栏保留最顶部的空间条。如何让地图div自动填充其垂直空间？ height: 100%不起作用，因为顶部栏会将地图推过页面底部。
+--------------------------------+
| top bar (n units tall) |
|================================|
| ^ |
| | |
| div |
| (100%-n units tall) |
| | |
| v |
+--------------------------------+
采纳答案by Bryan Downing
You could use absolute positioning.
您可以使用绝对定位。
HTML
HTML
<div id="content">
<div id="header">
Header
</div>
This is where the content starts.
</div>
CSS
CSS
BODY
{
margin: 0;
padding: 0;
}
#content
{
border: 3px solid #971111;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #DDD;
padding-top: 85px;
}
#header
{
border: 2px solid #279895;
background-color: #FFF;
height: 75px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
By positioning #contentabsolutely and specifying the top, right, bottom, and left properties, you get a div taking up the entire viewport.
通过#content绝对定位并指定顶部、右侧、底部和左侧属性，您将获得一个占据整个视口的 div。
Then you set padding-topon #contentto be >= the height of #header.
然后，设置padding-top上#content为> =的高度#header。
Finally, place #headerinside #contentand position it absolutely (specifying top, left, right, and the height).
最后，将其放置#header在内部#content并绝对定位（指定顶部、左侧、右侧和高度）。
I'm not sure how browser friendly this is.Check out this article at A List Apartfor more information.
我不确定这对浏览器有多友好。查看A List Apart 上的这篇文章，了解更多信息。
回答by erjiang
The way to do it, apparently, is to use JavaScript to monitor the onload and onresize events and programmatically resize the filling div like so:
显然，这样做的方法是使用 JavaScript 来监视 onload 和 onresize 事件并以编程方式调整填充 div 的大小，如下所示：
Using jQuery:
使用jQuery：
function resize() {
$("#bottom").height($(document).height() - $('#top').height());
}
Using plain JavaScript:
使用纯 JavaScript：
function resize() {
document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px";
}
Edit:and then bind these to the windowobject.
编辑：然后将这些绑定到window对象。
回答by Turing Test
Another solution not given uses CSS3 rather than javascript. There is a calc() function now which can be used to do the same thing:
未给出的另一个解决方案使用 CSS3 而不是 javascript。现在有一个 calc() 函数可以用来做同样的事情：
HTML
HTML
<div id="content">
<div id="header">
Header
</div>
<div id="bottom">
Bottom
</div>
</div>
CSS3
CSS3
#content {
height: 300px;
border-style: solid;
border-color: blue;
box-sizing: border-box;
}
#header {
background-color: red;
height: 30px;
}
#bottom {
height: calc(100% - 30px);
background-color: green;
}
Here is the jsfiddle
这是jsfiddle
You might also want to look into using the box-sizing: border-boxstyle for interior divs since this can get rid of problems of padding and borders poking outside of parent divs.
您可能还想考虑将box-sizing: border-box样式用于内部 div，因为这可以消除父 div 之外的填充和边框问题。
回答by Marcello Nuccio
If you calculate the page position of the div elementyou can do without knowing the header element:
如果计算 div 元素的页面位置，则无需知道 header 元素即可：
function resize() {
var el = $("#bottom");
el.height($(document).height() - el.offset().top);
}
回答by pcjuzer
I recommend you to try jquery-layoutplugin. You will see a bunch of demos and examples on the link.
我建议您尝试 jquery-layout插件。您将在链接上看到一堆演示和示例。
I don't know if you are familiar with the concepts of JQueryor some other Javascript helper framework, like Prototype.jsor Mootoolsbut it's a vital idea to use one of them. They are hide most browser-related tricks from the programmer and they have a number of useful extension for UI, DOM manipulation, etc.
我不知道您是否熟悉JQuery或其他一些 Javascript 辅助框架（如Prototype.js或Mootools）的概念，但使用其中之一是一个重要的想法。它们对程序员隐藏了大多数与浏览器相关的技巧，并且它们具有许多用于 UI、DOM 操作等的有用扩展。
回答by Arun
var sizeFooter = function(){
$(".webfooter").css("padding-bottom", "0px").css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
