Html 内容包装器可填充100%的页面高度
我正在努力使我的div（#content）达到页面的100%高度，如果我调整浏览器的大小，我的div（.divAboutRight）会相应地拉伸以适应内容，但我的包装div（#content）不会？我有一个图像（#logo），它以它的父对象（#内容）为中心，当父对象没有100%填充时，它不会这样做 我肯定我错过了一些非常基本的东西 如有任何协助或指导，将不胜感激Html 内容包装器可填充100%的页面高度,html,css,Html,Css,我正在努力使我的div（#content）达到页面的100%高度，如果我调整浏览器的大小，我的div（.divAboutRight）会相应地拉伸以适应内容，但我的包装div（#content）不会？我有一个图像（#logo），它以它的父对象（#内容）为中心，当父对象没有100%填充时，它不会这样做 我肯定我错过了一些非常基本的东西 如有任何协助或指导，将不胜感激 <style> html{margin:0; padding:0; widt
<style>
html{margin:0; padding:0; width:100%; height:100%;}
body{height:100%;min-height:100%; margin:0; padding:0; width:100%; background-color:#fb9f32; color:#FFF;}
.head{width:100%; height:60px; background-color:#FFFFFF;}
#content{width:100%;height:100%;min-height: 100%; position:relative; border:1px solid red;}
#Back
{
position:absolute;
left:0;
background:url(../images/Back.png) no-repeat;
background-size: 100% 100%;
float:left;
min-width:55%;
height:59%;
border:1px solid green;
}
#logo
{
display:block;
position: absolute;
top: 50%;
left: 50%;
max-height: 132px;
max-width: 133px;
margin: -66.5px 0 0 -66px;
z-index:9999999;
}
.divAboutRight{width:35%; margin-right:5%; margin-top:3%;float:right; border:1px solid yellow;}
</style>
<body>
<div class="head">
<!-- Header Content -->
</div>
<div id="content">
<div id="Back">
<!-- absolute positioned -->
</div>
<!-- Fixed logo to be center of content wrapper -->
<img id="logo" width="133" height="132" src="images/logo.png"/>
<div class="divAboutRight">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et volutpat metus. Cras et ante in enim sollicitudin facilisis quis eget lacus. Donec a justo in lacus ornare porttitor feugiat sit amet velit. Nunc iaculis, tellus quis sollicitudin placerat, leo nulla viverra lectus, id semper massa arcu in purus. Vivamus dictum venenatis metus quis viverra. Donec euismod, mauris vel aliquam convallis, lectus diam scelerisque lacus, id adipiscing orci augue nec arcu. Nulla molestie est lobortis tempor consectetur. Curabitur convallis malesuada velit et volutpat. Morbi a commodo velit. Integer malesuada nunc augue, ac convallis justo sollicitudin a. Nam nulla urna, facilisis quis ullamcorper dictum, venenatis eu ante. Ut consectetur sit amet lacus sed posuere. Nunc facilisis est eu ultrices scelerisque.
Cras feugiat tincidunt justo, et eleifend felis pretium ac. Nulla ornare, massa eu tincidunt tristique, sapien enim congue nisl, id pellentesque nisl lorem vel dolor. Mauris imperdiet, diam ac aliquam convallis, eros ante rhoncus justo, non malesuada mi nulla non sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Praesent sapien velit, sodales eget odio at, ullamcorper molestie nibh. Mauris iaculis posuere leo, non sollicitudin libero ullamcorper quis. Integer lobortis et eros vitae imperdiet. Ut ligula sem, tempor quis lobortis imperdiet, interdum ac nisl. Sed non lectus mauris.
Donec mattis lorem dolor, a feugiat neque dictum in. Nullam pharetra magna mi, quis hendrerit odio vestibulum id. Donec faucibus risus sed felis mattis pharetra vel a enim. Curabitur ultrices bibendum dapibus. Nulla sit amet metus mauris. Phasellus at tellus est. Mauris sagittis, eros quis laoreet sodales, tortor justo tempus dolor, et tincidunt dui tellus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque vitae pulvinar sapien. Praesent pellentesque metus sem, pellentesque ullamcorper augue pellentesque eu.
In neque lectus, ultricies ultrices nisi sed, commodo viverra justo. Cras quis neque vulputate, elementum ante non, pellentesque urna. Fusce id tempus magna. Fusce nec tortor id nulla pharetra sodales nec at tellus. Suspendisse gravida felis non turpis consequat, sit amet gravida risus ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis elementum consequat mauris ut accumsan. Donec nec aliquet tortor. Donec turpis tellus, convallis at faucibus sed, volutpat ac turpis. Vestibulum consequat sapien mi, et ultricies libero convallis ultricies. Mauris placerat mollis elementum. Nulla molestie felis purus, sed hendrerit enim vehicula ac. Curabitur adipiscing fringilla ultricies. Nunc hendrerit libero non aliquet egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis dui a enim interdum aliquet.
Nulla sagittis ligula enim, in vulputate lectus tincidunt ac. Sed imperdiet gravida orci at semper. Proin mollis adipiscing neque, vitae convallis risus rutrum eget. Praesent augue neque, lacinia nec tincidunt sed, elementum non sem. Suspendisse a mi condimentum, pellentesque lorem id, tempor turpis. In tortor nibh, convallis egestas ornare scelerisque, semper non nisi. Pellentesque ullamcorper euismod malesuada. Curabitur condimentum arcu id lorem posuere tincidunt. Proin convallis, elit vel fringilla tincidunt, eros diam ullamcorper lacus, eget posuere tortor velit vestibulum lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet pellentesque lacus. Maecenas molestie augue id ipsum feugiat, non pulvinar mi eleifend. Aenean augue metus, tincidunt non pellentesque eu, tristique quis metus. In a neque viverra, commodo velit ut, pretium diam.
</div>
</div>
</body>
html{margin:0；padding:0；宽度：100%；高度：100%；}
正文{高度：100%；最小高度：100%；边距：0；填充：0；宽度：100%；背景色：#fb9f32；颜色：#FFF；}
.头部{宽度：100%；高度：60px；背景色：#FFFFFF；}
#内容{宽度：100%；高度：100%；最小高度：100%；位置：相对；边框：1px实心红色；}
#背
{
位置：绝对位置；
左：0；
背景：url（../images/Back.png）不重复；
背景大小：100%100%；
浮动：左；
最小宽度：55%；
身高：59%；
边框：1px纯绿色；
}
#标志
{
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
最大高度：132px；
最大宽度：133px；
保证金：-66.5px0-66px；
z指数：999999；
}
.divAboutRight{宽度：35%；右边距：5%；边距顶部：3%；浮动：右侧；边框：1px纯黄色；}
Lorem ipsum dolor sit amet，是一位杰出的献身者。我是狮子座。Lorem ipsum dolor sit amet，是一位杰出的献身者。在美国。这是一种简单易行的方法。不要坐在港口或船闸里，也不要坐在船舱里。努克·亚库利斯，特卢斯·奎斯·索利西图，利奥·努拉·维韦拉·莱克图斯，我是普卢斯的塞姆珀·马萨·阿库。维尼那提斯·梅特斯·奎斯·维韦拉的名言。多涅克·尤伊斯莫，毛里斯·维尔·阿利夸姆·康瓦利斯，莱克斯·迪亚姆·斯克利斯·拉库斯，我是奥古斯·奈克·阿库家族的继承人。无分子是暂时性的。马勒苏阿达·维利特和瓦利特·帕特·库拉比图尔·康瓦利斯（Curabitur convallis malesuada velit et Volatit Pat）。莫比是一个康茂德·维利特。一个整数，一个整数，一个整数。纳姆·努拉·乌尔纳（Nam nulla urna），维尼那提欧盟议会主席乌拉姆·科佩尔（ullamcorper）的意见。但是，我们坐在一个空荡荡的座位上。Nunc设施是欧盟的特殊权杖。
我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们。毛里斯·因佩尔迪特（Mauris imperdiet）、康瓦利斯（diam ac aliquam convallis）、胡斯托（eros ante rhoncus justo）、无主无主（non malesuada mi nulla non sem）。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。潜力悬钩子。萨皮安·维利特、奥迪奥苏打水、乌拉姆·科珀·穆尔斯蒂·尼布。莫里斯·亚库利斯·波苏尔·利奥，自由乌拉姆·科佩尔·奎斯的非军人。整型lobortis和eros vitae饮食。Ut ligula sem，颞叶综合征饮食，interdum ac nisl。塞德·非莱克托斯·莫里斯。
唐纳克·马蒂斯·洛雷姆·多洛（Donec mattis lorem dolor），英国的一位封建主义者。我的大前庭是一个巨大的前庭。多内克·福西布斯·里苏斯（Donec faucibus risus）和马蒂斯·法雷特拉（mattis pharetra vel a enim）。乌尔特里希库拉比乌尔特里希库拉比乌尔特里希库拉比乌尔特里希库拉比乌尔特里希库拉比乌尔特里希库拉比乌尔特里希库拉比乌尔特里希库拉比乌尔。纳拉坐在阿梅特·梅特斯·莫里斯身边。泰卢斯东部的Phasellus。毛里斯·萨吉提斯、厄洛斯·奎斯·拉奥里特·索达莱斯、托托·索多尔和蒂尼·杜勒斯等人。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。pulvinar sapien的佩伦茨克生活。Present Pelletsque metus sem，Pelletsque ullamcorper augue Pelletsque eu。
在内克莱克图斯，ultricies ultrices nisi sed，commodo viverra justo。这是一个很好的选择，是一个很好的选择。我是坦普斯·麦格纳。特卢斯的一家药店的店主不在。暂停孕妇猫咪非turpis consequat，坐在amet孕妇risus ornare。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。两种元素在毛里斯和阿库姆桑之间相互作用。Donec nec aliquet tortor。Donec turpis tellus，faucibus sed的convallis，Volatic turpis。前庭是智者的前庭，是一种特殊的自由。毛里斯placerat mollis elementum。猫科动物是一种动物，它是一种特殊的动物。Nunc hendrerit libero non aliquet egestas。Lorem ipsum dolor sit amet，是一位杰出的献身者。马蒂斯酒后驾车。
在塞姆佩尔，在排卵的小舌上有一条矢状沟，它威胁着孕妇的生殖器官。这是一种令人振奋的精神，是一种令人振奋的精神。奥古斯特·内克、拉齐尼亚·内克·蒂尼·塞德、非扫描电镜元素。Suspendisse a mi调味品，佩伦茨克lorem id，临时turpis。在托尔托尔尼布岛，埃古斯塔斯（convallis egestas）或塞纳（Convarlis scelerisque），塞姆珀（semper non nisi）。佩伦茨克·乌拉姆科珀·尤伊斯莫·马莱苏亚达。库拉比图尔调味品阿尔库·伊德·洛雷姆·波苏尔·廷西登。在convallis，Elite vel fringilla tincidunt，eros diam ullamcorper lacus，eget posuere tortor velit前庭。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。我坐在阿梅特·佩伦茨克的座位上。这是一个非普尔文主义的封建社会。埃尼安·奥古斯·梅特斯，非佩朗斯特式的欧盟，特里斯蒂克·奎斯·梅特斯。穿上一件别致的长袍，一件普通的长袍，一件直径不到一厘米的长袍。
#content.head.head <body>
<div id="content">
<div class="head">
<!-- Header Content -->
</div>
<div id="Back">
<!-- absolute positioned -->
</div>
<!-- Fixed logo to be center of content wrapper -->
<img id="logo" width="133" height="132" src="images/logo.png"/>
<div class="divAboutRight">
<!-- Dynamic Content -->
</div>
</div>
</body>
<style>
#content{
.
.
height:calc(100% - 60px);
.
}
</style>
<style>
.head {
... // rest of head's css
z-index: 2;
}
#content {
position: relative;
box-sizing('border-box');
height: 100%;
padding-top: 60px; // height equal to the header
margin-top: -60px; // this will offset your content up again
z-index: 1; // make the content go BEHIND the head
... // rest of the CSS
}
</style>