我通过设置
填充了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/
此致 本。
答案 0 :(得分：2)
min-height: 100%怎么样？
http://jsfiddle.net/GxvuM/3/
答案 1 :(得分：1)
你可以使用jquery，但在我看来不是一个很好的解决方案。
var height = $(document).height();
$("#container").height(height);
如果有人知道使用纯CSS的更好的解决方案是受欢迎的。
答案 2 :(得分：1)
您可以使用：
$(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);
});
它将根据页面大小的变化更改容器高度。
答案 3 :(得分：0)
<!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>