html 垂直撑满,html – Div展开以目视填充垂直空间

我有一个页面，有一个标题，内容和页脚。页眉和页脚具有固定的高度，我希望内容调整其高度，以便它在页眉和页脚之间动态配合。我打算在我的内容中放置一个背景图像，所以至关重要的是它实际上填满了剩下的空闲垂直空间。

我使用Sticky Footer方法确保页脚保持在页面的底部。然而，这不会使内容跨越剩余空间的整个高度。

我已经尝试了几个解决方案，涉及我添加高度：100％，height：auto;位置：相对，但它没有工作。

html,

body {

height: 100%;

background-color: yellow;

}

header {

width: 100%;

height: 150px;

background-color: blue;

}

header nav ul li {

display: inline;

padding: 0 30px 0 0;

float: left;

}

#wrapper {

min-height: 100%;

height: auto !important;

height: 100%;

margin: 0 0 -30px 0;

/* the bottom margin is the negative value of the footer's height */

position: relative;

}

#wrapper #content {

background-color: pink;

width: 400px;

height: 100%;

margin: 0 0 -30px 100px;

padding: 25px 30px 25px 30px;

}

footer {

margin: -30px 0 0 0;

width: 100%;

height: 30px;

background-color: green;

}

• About
• Menu
• Specials

content

goes

here

footer