参见英文答案 >
Get div to take up 100% body height,minus fixed-height header and footer8个
包装在pageWrapper容器中,我在一列中有3个div.第一个(标题)和最后一个(navWrapper)具有固定的高度.我需要中间一个(contentWrapper)来拉伸高度,直到父div pageWrapper达到最大高度(根据浏览器的视口).
包装在pageWrapper容器中,我在一列中有3个div.第一个(标题)和最后一个(navWrapper)具有固定的高度.我需要中间一个(contentWrapper)来拉伸高度,直到父div pageWrapper达到最大高度(根据浏览器的视口).
我画出了这个问题的架构.
这是我当前解决方案的一个小提琴.
http://jsfiddle.net/xp6tG/
这里的代码
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>
它几乎正常工作,但它导致高度过高,导致出现垂直滚动条.
解决方法
这是一种做法.
应用以下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;
}
由于您为标头和#navwrapper块元素指定了高度,
你可以使用相对于父#pagewrapper块的绝对定位
设置#contentwrapper的底部和顶部偏移以及底部偏移
#navwrapper.
如果看到滚动条,则可能需要为html和/或body标签设置margin：0.
