Css 展开div以填充页面_Css - Fatal编程技术网

Css 展开div以填充页面

css

Css 展开div以填充页面,css,Css,我正在创建一个网页，内容分区应该填充整个屏幕。目前，它缩小到内容的数量页脚应该是“粘性”的，并且位于屏幕底部（想象一下几乎没有任何内容）我已经对页脚进行了排序，我正在努力调整内容分区的高度。如何让内容分区填满整个屏幕 <html> <head> <style> html, body {height:100%;margin:0;padding:0;} #wrap {min-height:100%;} header { height:100px;

我正在创建一个网页，内容分区应该填充整个屏幕。目前，它缩小到内容的数量

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

我已经对页脚进行了排序，我正在努力调整内容分区的高度。如何让内容分区填满整个屏幕

<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>


html，正文{高度：100%；边距：0；填充：0；}
#包裹{最小高度：100%；}
标题{
高度：100px；
背景：绿色；
}
#主要{
背景：黄色；
溢出：自动；
填充底部：50px；
}
#主要{
字号：28px；
溢出：无；
}
页脚{
位置：相对位置；
利润上限：-50px；
明确：两者皆有；
高度：50px；
背景：红色；
}
身体：以前{
内容：“；
身高：100%；
浮动：左；
宽度：0；
利润上限：-32767px；
}
这是标题

Lorem ipsum dolor sit amet，是一位杰出的献身者。塞德·维韦拉·莫里斯。埃尼亚的欧盟设施是埃尼姆。在lorem euismod调味品中添加了大量的柠檬汁。Morbi diam nisi，eleifend id varius vitae，ultrices sed nunc。设备、临时合同、临时合同等。在hendrerit risus的Nullam nec eros est。索利西图丁精英区的万岁。Vivamus id odio justo，eget调味品精英。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。杜伊斯·莫里斯·马萨、艾库利斯·欧拉奥里特·希特·阿梅特、苏西比特·内克·多洛。乌特鲁鲁姆维韦拉港口酒店。在康瓦利斯，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。同侧枕矢状位胎动，妊娠期胎动
这是页脚

尝试将页脚设置为

position: fixed
bottom: 0
left:0

这应该可以使页脚粘到底部。但是，如果主体扩展到页脚之外，则可能会造成问题。

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

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

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

这应该注意填充视口，因为html和正文已经设置为高度：100%

如果content div始终是完整的页面，那么为什么还要使用div呢？这就是身体。你能解释一下你想做什么吗？content div将被附加到JavaScript手势事件。用户将能够与content div交互，因此很遗憾，我不能在这个场合使用body。那么，您要扩大的是#main div？