我通过设置填充了一个div的高度
position: absolute;
bottom: 0px;
top: 0px;
只要页面不超过视口的高度，它就可以正常工作。如果页面滚动到屏幕外，则 div 不会随之扩展。
一种解决方案是使用 overflow: auto;，它为 div 提供滚动条并将内容保留在屏幕上。
有什么方法可以让 div 随着页面高度的增加而“扩展”它的高度？
编辑：JS Fiddle（原始问题）：http: //jsfiddle.net/GxvuM/ JS Fiddle（溢出'修复'）：http: //jsfiddle.net/BenMagee/y8Y97/1/
问候，本。
怎么样min-height: 100%？
http://jsfiddle.net/GxvuM/3/
您可以使用 jquery，但我认为这不是一个好的解决方案。
var height = $(document).height();
$("#container").height(height);
如果有人知道纯 CSS 的更好解决方案，欢迎。
您可以使用：
$(window).resize(function() {
// then add your js code
var container = $("#container");
var pageWidth = $(window).width();
var pageHeight = $(window).height();
var containerWidth = container.width();
var margin = (pageWidth - containerWidth)/2
container.css("left",margin);
container.css("height",pageHeight);
});
它将根据页面大小的变化改变容器高度。
<!DOCTYPE html>
<html>
<head>
<style>
body{
position:relative;
margin:0;
padding:0;
}
.container, .container-text{
width:50%;
padding:20px;
margin-left:25%; /* Half of with remaining space = 50% */
}
.container{
position:absolute;
top:0px;
bottom:0px;
background:#666;
z-index:-1;
}
</style>
</head>
<body>
<div class="container"></div>
<p class="container-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis lobortis ipsum, ullamcorper aliquam lacus euismod sed. Vivamus gravida nunc nec lacus sagittis blandit vel vel lacus. Nunc sed ligula at enim posuere cursus at eget velit. Aenean ut mauris a quam tempus imperdiet. Nulla volutpat, ante rhoncus gravida rutrum, dolor ipsum pretium lorem, ac laoreet mi justo id mi. Cras a urna non ante rutrum interdum. Duis id iaculis ante. Nullam molestie libero eu massa condimentum scelerisque. Cras fringilla, dui eu malesuada mattis, orci lorem faucibus mi, nec tincidunt mauris lectus vel est. Aliquam nunc felis, vestibulum id aliquet eget, pulvinar et turpis. Sed sapien nisi, convallis eu molestie accumsan, sagittis ut ligula. Donec volutpat mollis ullamcorper. Duis rhoncus, orci eu commodo tincidunt, ante neque consequat nisl, quis aliquam sapien nibh non enim. Proin sapien erat, convallis eu euismod non, iaculis et lorem. Nulla a molestie magna. Curabitur auctor, neque eget vulputate euismod, odio mi mattis velit, ac volutpat eros mauris ut metus.
Donec posuere nisi accumsan risus auctor malesuada. Morbi aliquam lectus id sem convallis vitae varius dui lobortis. Phasellus a nulla at dolor consequat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim mi, malesuada at
imperdiet non, posuere nec ipsum. Aliquam sed mi mi. Quisque eleifend lacus eget massa cursus scelerisque. Nam congue neque eget orci hendrerit vitae rhoncus nisl bibendum. Vivamus vestibulum lorem quam, quis accumsan quam. Ut quis ipsum vitae arcu accumsan pulvinar sit amet eget ligula. Nam eget enim ligula, sed tincidunt mi.
Pellentesque euismod nulla at magna luctus sed porttitor tellus vehicula. Nullam id sapien mauris, sit amet adipiscing quam. Ut vehicula viverra sem bibendum condimentum. Morbi egestas sem sed justo consequat pretium. Duis eu lorem sed nibh malesuada imperdiet vel ac neque. Quisque leo lorem, sollicitudin a euismod ac, consequat tempor ipsum. Proin in libero lorem. Proin eu purus ac elit fringilla consequat ut id nisi. Suspendisse sit amet tortor mauris, nec iaculis lacus.
Pellentesque lobortis pharetra luctus. Curabitur tincidunt, odio a ullamcorper fermentum, leo risus malesuada diam, ultrices elementum magna turpis ac metus. Nam ut vehicula magna. Vestibulum porttitor eleifend nisi a mollis. Integer ante justo, condimentum quis vulputate non, interdum vitae lacus. Vestibulum nec enim risus. Pellentesque varius, nisi sit amet auctor gravida, lacus nibh tincidunt diam, in auctor erat nulla iaculis magna. Nullam mattis viverra gravida. Mauris quis arcu quis metus molestie lacinia. Phasellus accumsan sem a ligula fringilla adipiscing. Phasellus enim erat, pellentesque eu consectetur eu, tempus sed purus. Praesent vitae nibh sem, in semper nisl. In hendrerit porta ligula nec mattis. Morbi placerat ante dapibus mi facilisis lacinia. Phasellus dapibus sagittis tortor et aliquet. Maecenas commodo justo nec dolor imperdiet non convallis purus tincidunt.
Vestibulum in ante orci. Etiam in dolor elit, eget luctus arcu. Pellentesque pellentesque sapien in nibh accumsan id gravida ipsum vulputate. Nulla neque metus, sagittis et tempus sed, tempor ut risus. Curabitur vitae elit nec ante pretium malesuada id quis urna. Morbi pulvinar molestie leo, tincidunt sodales justo feugiat at. Maecenas sollicitudin luctus libero eu posuere. Proin vitae enim at est luctus fringilla quis quis justo. Pellentesque interdum, quam a imperdiet auctor, libero erat tristique augue, vel viverra dui mauris nec est. Vestibulum nec mi augue. Cras dapibus, risus at hendrerit consectetur, risus dui porttitor risus, sed lobortis nisi dui ac metus. Donec cursus sollicitudin ipsum, vel aliquet est porta eget. Integer fermentum, mauris quis tincidunt placerat, justo magna scelerisque neque, vel venenatis arcu felis sit amet turpis. Vestibulum eros augue, tincidunt sit amet placerat a, pharetra eget lectus. Proin vel leo et ante auctor elementum. Nam fermentum hendrerit ipsum, vitae posuere magna suscipit nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis lobortis ipsum, ullamcorper aliquam lacus euismod sed. Vivamus gravida nunc nec lacus sagittis blandit vel vel lacus. Nunc sed ligula at enim posuere cursus at eget velit. Aenean ut mauris a quam tempus imperdiet. Nulla volutpat, ante rhoncus gravida rutrum, dolor ipsum pretium lorem, ac laoreet mi justo id mi. Cras a urna non ante rutrum interdum. Duis id iaculis ante. Nullam molestie libero eu massa condimentum scelerisque. Cras fringilla, dui eu malesuada mattis, orci lorem faucibus mi, nec tincidunt mauris lectus vel est. Aliquam nunc felis, vestibulum id aliquet eget, pulvinar et turpis. Sed sapien nisi, convallis eu molestie accumsan, sagittis ut ligula. Donec volutpat mollis ullamcorper. Duis rhoncus, orci eu commodo tincidunt, ante neque consequat nisl, quis aliquam sapien nibh non enim. Proin sapien erat, convallis eu euismod non, iaculis et lorem. Nulla a molestie magna. Curabitur auctor, neque eget vulputate euismod, odio mi mattis velit, ac volutpat eros mauris ut metus.
Donec posuere nisi accumsan risus auctor malesuada. Morbi aliquam lectus id sem convallis vitae varius dui lobortis. Phasellus a nulla at dolor consequat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim mi, malesuada at
imperdiet non, posuere nec ipsum. Aliquam sed mi mi. Quisque eleifend lacus eget massa cursus scelerisque. Nam congue neque eget orci hendrerit vitae rhoncus nisl bibendum. Vivamus vestibulum lorem quam, quis accumsan quam. Ut quis ipsum vitae arcu accumsan pulvinar sit amet eget ligula. Nam eget enim ligula, sed tincidunt mi.
Pellentesque euismod nulla at magna luctus sed porttitor tellus vehicula. Nullam id sapien mauris, sit amet adipiscing quam. Ut vehicula viverra sem bibendum condimentum. Morbi egestas sem sed justo consequat pretium. Duis eu lorem sed nibh malesuada imperdiet vel ac neque. Quisque leo lorem, sollicitudin a euismod ac, consequat tempor ipsum. Proin in libero lorem. Proin eu purus ac elit fringilla consequat ut id nisi. Suspendisse sit amet tortor mauris, nec iaculis lacus.
Pellentesque lobortis pharetra luctus. Curabitur tincidunt, odio a ullamcorper fermentum, leo risus malesuada diam, ultrices elementum magna turpis ac metus. Nam ut vehicula magna. Vestibulum porttitor eleifend nisi a mollis. Integer ante justo, condimentum quis vulputate non, interdum vitae lacus. Vestibulum nec enim risus. Pellentesque varius, nisi sit amet auctor gravida, lacus nibh tincidunt diam, in auctor erat nulla iaculis magna. Nullam mattis viverra gravida. Mauris quis arcu quis metus molestie lacinia. Phasellus accumsan sem a ligula fringilla adipiscing. Phasellus enim erat, pellentesque eu consectetur eu, tempus sed purus. Praesent vitae nibh sem, in semper nisl. In hendrerit porta ligula nec mattis. Morbi placerat ante dapibus mi facilisis lacinia. Phasellus dapibus sagittis tortor et aliquet. Maecenas commodo justo nec dolor imperdiet non convallis purus tincidunt.
Vestibulum in ante orci. Etiam in dolor elit, eget luctus arcu. Pellentesque pellentesque sapien in nibh accumsan id gravida ipsum vulputate. Nulla neque metus, sagittis et tempus sed, tempor ut risus. Curabitur vitae elit nec ante pretium malesuada id quis urna. Morbi pulvinar molestie leo, tincidunt sodales justo feugiat at. Maecenas sollicitudin luctus libero eu posuere. Proin vitae enim at est luctus fringilla quis quis justo. Pellentesque interdum, quam a imperdiet auctor, libero erat tristique augue, vel viverra dui mauris nec est. Vestibulum nec mi augue. Cras dapibus, risus at hendrerit consectetur, risus dui porttitor risus, sed lobortis nisi dui ac metus. Donec cursus sollicitudin ipsum, vel aliquet est porta eget. Integer fermentum, mauris quis tincidunt placerat, justo magna scelerisque neque, vel venenatis arcu felis sit amet turpis. Vestibulum eros augue, tincidunt sit amet placerat a, pharetra eget lectus. Proin vel leo et ante auctor elementum. Nam fermentum hendrerit ipsum, vitae posuere magna suscipit nec.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis lobortis ipsum, ullamcorper aliquam lacus euismod sed. Vivamus gravida nunc nec lacus sagittis blandit vel vel lacus. Nunc sed ligula at enim posuere cursus at eget velit. Aenean ut mauris a quam tempus imperdiet. Nulla volutpat, ante rhoncus gravida rutrum, dolor ipsum pretium lorem, ac laoreet mi justo id mi. Cras a urna non ante rutrum interdum. Duis id iaculis ante. Nullam molestie libero eu massa condimentum scelerisque. Cras fringilla, dui eu malesuada mattis, orci lorem faucibus mi, nec tincidunt mauris lectus vel est. Aliquam nunc felis, vestibulum id aliquet eget, pulvinar et turpis. Sed sapien nisi, convallis eu molestie accumsan, sagittis ut ligula. Donec volutpat mollis ullamcorper. Duis rhoncus, orci eu commodo tincidunt, ante neque consequat nisl, quis aliquam sapien nibh non enim. Proin sapien erat, convallis eu euismod non, iaculis et lorem. Nulla a molestie magna. Curabitur auctor, neque eget vulputate euismod, odio mi mattis velit, ac volutpat eros mauris ut metus.
Donec posuere nisi accumsan risus auctor malesuada. Morbi aliquam lectus id sem convallis vitae varius dui lobortis. Phasellus a nulla at dolor consequat tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim mi, malesuada at
imperdiet non, posuere nec ipsum. Aliquam sed mi mi. Quisque eleifend lacus eget massa cursus scelerisque. Nam congue neque eget orci hendrerit vitae rhoncus nisl bibendum. Vivamus vestibulum lorem quam, quis accumsan quam. Ut quis ipsum vitae arcu accumsan pulvinar sit amet eget ligula. Nam eget enim ligula, sed tincidunt mi.
Pellentesque euismod nulla at magna luctus sed porttitor tellus vehicula. Nullam id sapien mauris, sit amet adipiscing quam. Ut vehicula viverra sem bibendum condimentum. Morbi egestas sem sed justo consequat pretium. Duis eu lorem sed nibh malesuada imperdiet vel ac neque. Quisque leo lorem, sollicitudin a euismod ac, consequat tempor ipsum. Proin in libero lorem. Proin eu purus ac elit fringilla consequat ut id nisi. Suspendisse sit amet tortor mauris, nec iaculis lacus.
Pellentesque lobortis pharetra luctus. Curabitur tincidunt, odio a ullamcorper fermentum, leo risus malesuada diam, ultrices elementum magna turpis ac metus. Nam ut vehicula magna. Vestibulum porttitor eleifend nisi a mollis. Integer ante justo, condimentum quis vulputate non, interdum vitae lacus. Vestibulum nec enim risus. Pellentesque varius, nisi sit amet auctor gravida, lacus nibh tincidunt diam, in auctor erat nulla iaculis magna. Nullam mattis viverra gravida. Mauris quis arcu quis metus molestie lacinia. Phasellus accumsan sem a ligula fringilla adipiscing. Phasellus enim erat, pellentesque eu consectetur eu, tempus sed purus. Praesent vitae nibh sem, in semper nisl. In hendrerit porta ligula nec mattis. Morbi placerat ante dapibus mi facilisis lacinia. Phasellus dapibus sagittis tortor et aliquet. Maecenas commodo justo nec dolor imperdiet non convallis purus tincidunt.
Vestibulum in ante orci. Etiam in dolor elit, eget luctus arcu. Pellentesque pellentesque sapien in nibh accumsan id gravida ipsum vulputate. Nulla neque metus, sagittis et tempus sed, tempor ut risus. Curabitur vitae elit nec ante pretium malesuada id quis urna. Morbi pulvinar molestie leo, tincidunt sodales justo feugiat at. Maecenas sollicitudin luctus libero eu posuere. Proin vitae enim at est luctus fringilla quis quis justo. Pellentesque interdum, quam a imperdiet auctor, libero erat tristique augue, vel viverra dui mauris nec est. Vestibulum nec mi augue. Cras dapibus, risus at hendrerit consectetur, risus dui porttitor risus, sed lobortis nisi dui ac metus. Donec cursus sollicitudin ipsum, vel aliquet est porta eget. Integer fermentum, mauris quis tincidunt placerat, justo magna scelerisque neque, vel venenatis arcu felis sit amet turpis. Vestibulum eros augue, tincidunt sit amet placerat a, pharetra eget lectus. Proin vel leo et ante auctor elementum. Nam fermentum hendrerit ipsum, vitae posuere magna suscipit nec.</p>
</body>
</html>