Html CSS，垂直拉伸div直到达到其父级的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18070317/
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
CSS, Stretching vertically div until it reach the height of its parent
提问by Very Curious
Wrapped in a pageWrappercontainer, I have 3 divs in a column. First (header) and last (navWrapper) have fixed heights. I need the middle one (contentWrapper) to stretch in height until the parent div pageWrapper reaches the maximum height (according to the browser's viewport).
包裹在一个pageWrapper容器中，我在一列中有 3 个 div。First (header) 和 last (navWrapper) 具有固定的高度。我需要中间的 ( contentWrapper) 在高度上拉伸，直到父 div pageWrapper 达到最大高度（根据浏览器的视口）。
I draw the schemaof this problem.
我画出了这个问题的架构。
Here is a fiddle of my current solution.http://jsfiddle.net/xp6tG/
这是我当前解决方案的小提琴。http://jsfiddle.net/xp6tG/
and here the code
和这里的代码
CSS and HTML
CSS 和 HTML
html, body{
height: 100%;
}
body{
background-color: #E3E3E3;
}
#pageWrapper{
margin: 0 auto;
position: relative;
width: 600px;
height: 100%;
}
header{
display:block;
width: 100%;
height: 100px;
background: yellow;
}
#contentWrapper{
width: 100%;
height: 100%;
background: blue;
}
#navWrapper{
width: 100%;
height: 100px;
background: green;
}<div id="pageWrapper">
<header>
Header
</header>
<div id="contentWrapper">
Content
</div>
<div id="navWrapper">
Nav
</div>
</div>It is almost working, but it results in too high height, which causes that a vertical scrollbar appears.
它几乎可以工作，但导致高度过高，导致出现垂直滚动条。
回答by Marc Audet
Here is one way of doing it.
这是一种方法。
Apply the following CSS:
应用以下CSS：
html, body{ height: 100%; margin: 0;}
body{ background-color: #e3e3e3;}
#pagewrapper{
margin: 0 auto;
position: relative;
width: 600px;
height: 100%;
}
header{
display:block;
width: 100%;
height: 100px;
background: yellow;
}
#contentwrapper{
width: 100%;
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
background: blue;
}
#navwrapper{
width: 100%;
position: absolute;
height: 100px;
bottom: 0px;
left: 0;
background: green;
}
Since you specified heights for the headerand #navwrapperblock elements,
you can use absolute positioning with respect to the parent #pagewrapperblock
to set the bottom and top offsets for #contentwrapperand the bottom offset for
#navwrapper.
由于您为header和#navwrapper块元素指定了高度，因此您可以使用相对于父#pagewrapper块的绝对定位来设置 的底部和顶部偏移量#contentwrapper以及 的底部偏移量
#navwrapper。
If you see a scroll bar, you may need to set margin: 0for either the htmland/or bodytags.
如果你看到一个滚动条，你可能需要设置margin: 0为任意的html和/或body标签。
Demo fiddle: http://jsfiddle.net/audetwebdesign/yUs6r/
回答by Josh
You can try adding this script in your section after your CSS is called. It will find the heights of your head/foot elements and make the height in the center div fill the screen. This is good because if you decide to make your header/footer elements heights dynamic this script will still work.
您可以在调用 CSS 后尝试在您的部分中添加此脚本。它会找到你的头/脚元素的高度，并使中心 div 的高度填满屏幕。这很好，因为如果您决定使页眉/页脚元素高度动态，此脚本仍然可以工作。
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var totalHeight = $('#pageWrapper').height();
totalHeight -= $('header').height();
totalHeight -= $('#navWrapper').height();
// Remove an extra 20px for good measure
totalHeight -= 10;
$('#contentWrapper').css('height', 'auto');
$('#contentWrapper').css('min-height', totalHeight);
});
</script>
