我试图让我的主要内容和菜单div延伸到页脚div的顶部。我的HTML是：
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
padding-bottom: 80px;
bull
}
#content {
padding-left: 310px;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
width: 300px;
position: absolute;
float: left;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: #3095C7;
}<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
content here
</div>
</div>
<div id="footer">footer content</div>
</div>
我已将main，content和menu高度设置为100％，但这当然只是wrapper div的最底部，超出footer。我正在尝试的是菜单和内容从标题一直延伸到页脚顶部，因此它填充整个页面。我曾经玩vh，但在重新调整窗口大小时不会经常出现。
是否有任何技巧会使div填满所有空白区域并且不会与页脚重叠？
答案 0 :(得分：2)
使用flexbox非常简单（浏览器支持是IE10 +以及其他远程现代化的东西）
display: flex; flex-flow: column nowrap flex: 1 1 auto和display: flex，这样1）它会增长到必要的高度和2），这样它的子项也会增长到#main的高度。 flex: 0 1 300px上设置#menu（并删除浮点数/位置：绝对值）并将#content设置为flex: 1 1 auto。 修改
忘记从页脚中删除position: absolute（和关联的bottom/left规则）。我还添加了大量内容（并将左侧菜单修改为不缩小flex: 0 0 300px而不是flex: 0 1 300px，这样一堆内容就不会将其折叠成无关紧要的内容
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
display:flex;
flex-flow: column nowrap
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
display: flex;
flex: 1 1 auto;
}
#content {
flex: 1 1 auto;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
flex: 0 0 300px;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
background: #3095C7;
}<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tristique ex, at rhoncus sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec non ipsum ut nulla volutpat gravida. Donec euismod nibh venenatis fermentum dignissim. Nulla sagittis tristique felis vitae fermentum. Phasellus at viverra sem. In scelerisque mi ac dolor convallis, vitae convallis felis condimentum. Donec porta leo nec semper luctus. In dignissim bibendum viverra. Maecenas molestie, dui eget finibus hendrerit, arcu turpis dapibus arcu, laoreet aliquam lectus justo a lorem. In et enim ac elit tincidunt imperdiet. Phasellus eget erat sed nulla placerat venenatis et in ligula. Mauris volutpat feugiat diam sit amet bibendum. Donec vulputate tristique augue vel pharetra. Mauris orci quam, pharetra lacinia commodo eu, tristique at est.
Morbi metus sapien, venenatis a pulvinar eget, accumsan et nisi. Phasellus vitae blandit augue. Proin quis mollis orci. Ut consequat tempor nulla id dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce in euismod nibh, pharetra laoreet eros. Donec feugiat neque est, ac pharetra quam sollicitudin a.
Donec hendrerit ac magna at tincidunt. Pellentesque eget eros vel mauris porttitor aliquam ac vel tortor. Vestibulum vitae porttitor enim, eu scelerisque quam. Suspendisse tincidunt nisi non eros condimentum, quis faucibus arcu pellentesque. Morbi aliquet, est at pretium molestie, est arcu volutpat lectus, et condimentum leo risus sed velit. Maecenas at fermentum magna. Duis sit amet pretium ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, facilisis eu tellus vel, sagittis pretium metus. Aenean fermentum sem eu finibus dignissim. Fusce lacinia purus at libero ornare ultricies. Etiam pellentesque erat nisi, a ullamcorper arcu varius eu. Quisque lacinia bibendum ipsum vitae bibendum.
Maecenas non consequat augue, id euismod magna. Vestibulum ut maximus eros, ut efficitur neque. Aenean feugiat nunc et viverra pulvinar. Praesent vitae lobortis mi. Duis eu lorem a velit consequat fringilla at eu lacus. Ut mi mauris, cursus et lectus non, auctor iaculis eros. Sed sit amet efficitur arcu. Maecenas in enim quis massa vestibulum imperdiet ac quis dui. Curabitur malesuada, neque eu scelerisque sagittis, erat nisl condimentum sapien, vitae volutpat felis nisi ac lectus. Fusce iaculis mollis enim, vitae consectetur metus egestas sed. Proin lacus lorem, finibus ut tincidunt quis, tincidunt a urna. Donec fringilla risus augue, et bibendum diam cursus vitae. Aenean mattis sapien eget volutpat ornare.
</div>
</div>
<div id="footer">footer content</div>
</div>
答案 1 :(得分：1)
我认为你的代码有些混乱。
如果我理解你的问题，你有一个固定高度的页眉和页脚，你希望网页的内容填充（垂直）窗口的高度。
当使用身高：100％时，请记住所有父母需要100％的相同身高但是你可能会遇到问题，因为身高100％加上页脚和标题的固定高度会产生一个滚动条。
您可以使用css calc将px＆＃39; s减去100％的高度。我在你的例子中计算你需要减去的像素，你的内容的高度应该是：
height:calc(100% - 110px);
和你的主要高度：
height:calc(100% - 20px);
剩下的就是你的css，有很多改变可以实现我认为你正在寻找的东西。如果我错了，请告诉我： FIDDLE
（你可以看到我也使用了calc来设置你的内容的宽度，因为你的菜单也有固定的宽度）
注意：如果您不使用border-box容器，请使用此技术，因为您使用的所有填充都会为元素添加宽度（或高度）。我建议你使用添加
* {
box-sizing: border-box;
}
在你的CSS表中。一旦你习惯了你的生活会更容易（只是我的拙见，有些人可能不同意）
答案 2 :(得分：1)
假设您的页脚具有固定高度，您可以使用#menu自动设置#content和position: absolute的高度：
position: absolute;
top: 0;
bottom: 110px; /* #footer height */
大多数情况下，绝对定位的元素具有计算的高度和宽度的自动值以适合元素的内容。但是，可以通过指定（不是自动）顶部和底部以及未指定高度（即自动）来填充未替换的绝对定位元素以填充可用空间。同样适用于左，右和宽度。
请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/position#Notes
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
position: absolute;
top: 20px;
bottom: 0;
width: 100%;
}
#content {
position: absolute;
left: 310px;
right: 0;
top: 0;
bottom: 50px;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
top: 0;
bottom: 50px;
width: 300px;
position: absolute;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: #3095C7;
}<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
content here
</div>
</div>
<div id="footer">footer content</div>
</div>
答案 3 :(得分：0)
在CSS中添加指定的高度，例如height: 100px然后将overflow设置为hidden。
基本上，只需添加：
height: 100px;
overflow: hidden;
到你的菜单和内容。