如何扩展div以覆盖剩余页面高度 [英] How to expand div to cover remaining page height
问题描述
很抱歉，搜索已返回吨的结果，但没有什么匹配我的问题。似乎SO被淹没在div高度问题。 ： - （
Sorry, searching has returned tons of results, but nothing that matches my problem exactly. Seems like SO is drowning in div-height problems. :-(
我有以下测试布局：
<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css" media="screen">
body {
margin:0;
}
div {
width:100%;
}
.content {
position:relative;
float:none;
margin-left:auto;
margin-right:auto;
display:block;
width:680px;
}
#one {
height:100px;
position:relative;
background-color:#0000FF;
}
#two {
position:relative;
background-color:#00FF00;
height:100%;
min-height:400px;
}
#three {
height:70px;
background-color:#FF0000;
bottom:0;
position:absolute;
}
#oneone {
height:100%;
background-color:#838383;
}
#twotwo {
height:400px;
background-color:#EEFF47;
}
#threethree {
height:100%;
background-color:#400080;
}
</style>
</head>
<body>
<div id="one">
<div class="content" id="oneone"></div>
</div>
<div id="two">
<div class="content" id="twotwo">Expand this to the bottom.</div>
</div>
<div id="three">
<div class="content" id="threethree"></div>
</div>
</body>
</html>
我想让div一和三留在顶部和底部，div twotwo应该高度扩展容纳我的pagecontent，并且当内容大于页面高度时展开，因此将div三下推并引起滚动。
I want the div one and three to stay in top and bottom, div twotwo should expand in height to accommodate my pagecontent, and expand when the content is more than the page height, therefore pushing the div three down and cause scrolling.
这是否可以没有JavaScript？如果是这样，什么是CSS解决方案呢？
谢谢！
Is this possible without JavaScript? If so, what's the CSS solution to this? Thanks!
推荐答案
Javascript是需要的。当您具有页眉和页脚高度，并且您希望中间有100％的高度时，结果将是整页高度+页眉高度+页脚高度。所以你最终会有滚动条来查看整个页面。如果你想要一切适合在同一个窗口，那么你我们需要使用javascript来检测多少中间空间，并相应地分配高度。
Javascript is needed for this. When you have a header and footer height and you want the middle to have 100% height, the result will be full page height + header height + footer height. So you'll end up with scroll bars to view the entire page. If you want everything to fit in the same window, then you we need to use javascript to detect how much middle space is left and assign height accordingly.
要使用jQuery检测中间高度，您可以执行
To detect middle height with jQuery, you can do
var one = $('#one').height(),
three = $('#three').height(),
two = parseInt($(window).height() - three - one);
alert(two);
这将给你留下的中间部分的高度， < div id =two> 。
This will give you the height that is left for the middle part which is <div id="two"> in your case.
查看jQuery代码在 http://jsfiddle.net / Ppw5y / 。请注意，当展开窗口并再次运行代码时，您将有不同的内容高度。
See jQuery code in action at http://jsfiddle.net/Ppw5y/. Notice that when you expand the window and you run the code again, you will have a different content height.
这篇关于如何扩展div以覆盖剩余页面高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
