Question

我正在创建一个内容div应该填满所有屏幕的网页。目前它缩小到内容量。

页脚应该是“粘性的”并且位于屏幕的底部（想象几乎没有任何内容）。

我的页脚位已排序，我只是在内容div的高度上挣扎。如何让内容div填满整个屏幕？

<html>
<head>

<style>
html, body {height:100%;margin:0;padding:0;}
#wrap {min-height:100%;}
header {
    height:100px;
    background:green;
}
#main {
    background:yellow;
    overflow:auto;
    padding-bottom:50px;
}
#main {
    font-size:28px;
    overflow:none;
}
footer {
    position:relative;
    margin-top:-50px;
    clear:both;
    height:50px;
    background:red;
}
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
</style>
<!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->
</head>
<body>

<div id="wrap">
    <header>
        This is the header
    </header>
    <div id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a viverra mauris. Aenean eu facilisis enim. Cras laoreet diam at lorem euismod condimentum. Morbi diam nisi, eleifend id varius vitae, ultrices sed nunc. Aenean facilisis, arcu sed congue tempor, leo nisi convallis dolor, et malesuada velit tortor id neque. Nullam nec eros est, at hendrerit risus. Vivamus in sollicitudin elit. Vivamus id odio justo, eget condimentum elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis mauris massa, iaculis eu laoreet sit amet, suscipit nec dolor. Ut rutrum porttitor viverra. Proin convallis, turpis id varius varius, nisi nulla vulputate dolor, vitae mattis neque quam ac nulla. Fusce accumsan, urna nec vulputate imperdiet, tortor erat fringilla massa, nec convallis ligula risus vitae mauris. Vivamus sagittis pulvinar ipsum, bibendum congue purus gravida posuere.</p>
<!--
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non lorem id ante scelerisque malesuada id ut nibh. Duis massa erat, dictum hendrerit interdum ut, faucibus non lorem. Sed velit leo, pellentesque sit amet dapibus vel, vestibulum ac sem. Nulla a hendrerit risus. In sodales ultricies lorem at tempus. Fusce sed velit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut mi nunc, et tristique ipsum. Cras lobortis augue eget enim sodales et sollicitudin turpis feugiat. Morbi a interdum felis. Donec porttitor nibh ut metus commodo et pulvinar dui pretium. Fusce pellentesque felis in metus vehicula feugiat.</p>
<p>
Duis suscipit nibh non leo venenatis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tincidunt sapien id purus tempus ac viverra sapien vulputate. Fusce eu tortor purus. Mauris sit amet diam a arcu hendrerit auctor. Mauris vel nunc nec leo gravida ullamcorper. Donec eu arcu nibh, eu feugiat lorem. Nunc euismod ligula nec est lobortis vehicula. Etiam feugiat lacus in nulla porttitor eu iaculis dui dictum. Nullam gravida enim in leo tempor euismod. Cras porttitor, neque at molestie egestas, metus nisl tincidunt lacus, non vestibulum metus sapien eu est. Mauris tempus mattis quam eu elementum. Curabitur tempor feugiat massa, sit amet tempor mauris fermentum ut. Nullam faucibus lobortis lectus, ac fermentum sapien venenatis eget.</p>
<p>
Nulla facilisi. Proin a lorem non justo gravida pharetra a at dolor. Phasellus vitae viverra purus. Nullam at tellus id orci ornare cursus. Maecenas velit ante, egestas eu auctor at, lacinia in massa. Morbi sit amet turpis a neque vestibulum pulvinar. Aliquam erat volutpat. Ut accumsan aliquet sodales. Praesent tortor turpis, vulputate quis bibendum eu, pharetra vestibulum nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem ac consectetur volutpat, diam sem bibendum lectus, vitae sagittis eros odio eget urna. Sed ipsum nulla, interdum nec accumsan at, faucibus at est. Vivamus faucibus condimentum erat, id varius metus cursus non. Vestibulum ut justo fringilla enim pellentesque auctor pretium eget quam.</p>
<p>
Ut in urna quis turpis placerat volutpat. Integer vel tincidunt sem. Pellentesque semper venenatis vestibulum. Pellentesque pretium volutpat neque eu dignissim. Aenean consectetur, magna in hendrerit sodales, mauris libero ullamcorper lectus, in imperdiet enim odio quis sem. Donec sed tellus urna, non sodales massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus rutrum dolor nec sem gravida dignissim. Curabitur in ante leo. </p>
-->
    </div>
</div>
<footer>
    This is the footer
</footer>
</body>
</html>

Answer 1

尝试将页脚设置为

position: fixed
bottom: 0
left:0

这应该可以将页脚粘贴到底部。但如果身体超出页脚，可能会造成问题。

Answer 2

看起来您可能已经知道这一点，但为了使元素适合视口的高度，它以及其他每个祖先元素都需要100％的高度。

你已经为body和html（这很好）做了这个，但你也需要为#wrap做这个。最小高度不适用于此。然后，您还要将标题设置为百分比高度，以便可以让#main div填充视口的其余部分。类似的东西：

#wrap  { height: 100%; }
header { height: 10%; }
#main  { height: 90%; }

这应该注意填充视口，因为你的html和body已经设置为height：100％;

扩展div以填充页面

2 个答案: