-1

我正在创建一个网页，内容 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>
4

2 回答 2

0

似乎您可能已经知道这一点，但为了使元素适合视口的高度，它以及所有其他祖先元素都需要 100% 高度。

您已经为 body 和 html 完成了此操作（这很好），但您也需要为 #wrap 执行此操作。min-height 对此不起作用。然后，您还需要将标题设置为百分比高度，以便您可以让#main div 填充视口的其余部分。就像是：

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

这应该负责填充视口，因为您的 html 和 body 已经设置为 height: 100%;

于 2014-07-01T17:47:02.903 回答
0

尝试将页脚设置为

position: fixed
bottom: 0
left:0

这应该可以将页脚固定在底部。但是，如果正文扩展到页脚之外，则可能会造成问题。

于 2012-06-15T09:30:01.630 回答