猿问

如何让内容div全屏显示

我有html页面，容器div包含页眉，内容和页脚div，html cod和css代码如下：


HTML 代码：


  <html>

    <div class="container">

    <div class="header"></div>

    <div class="content">

    <div class="content2"></div>

    </div>

    <div class="footer"></div>

    </div>

    </html>

CSS代码：


header{

padding-bottom:5px;

width:100%;

position:fixed;

top:0;

z-index:100;

height:70px;

background-color:#006}


.content{

min-height: 100%;

width:100%;

background-color:#006;

margin-top:70px;

margin-bottom:60px }


.content2{

margin:auto;

min-height: 100%;

width:95%;

background-color:#FFFEA5;

padding-bottom: 20px;

}


.footer{

text-align:center;

width:100%;

position:fixed;

bottom:0;

z-index:100;

height:70px;

background-color:#006}

我希望 content2 div 是全屏的，或者它不包含任何内容，我执行了上面的代码但没有工作，它看起来像附加的图像。

紫衣仙女
浏览 174回答 3
3回答

慕姐4208626

我更改了 css 文件并使其成为这样，现在可以使用了：&nbsp;.header{&nbsp; &nbsp; padding-bottom:5px;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; position:fixed;&nbsp; &nbsp; top:0;&nbsp; &nbsp; z-index:100;&nbsp; &nbsp; height:70px;&nbsp; &nbsp; background-color:#006}.footer{&nbsp; &nbsp; text-align:center;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; position:fixed;&nbsp; &nbsp; bottom:0;&nbsp; &nbsp; z-index:100;&nbsp; &nbsp; height:70px;&nbsp; &nbsp; background-color:#006}.content{&nbsp; &nbsp; min-height: 100%;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; background-color:#FFFEA5;&nbsp; &nbsp; margin-top:70px;&nbsp; &nbsp; margin-bottom:60px }.content2{&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; margin:auto;&nbsp; &nbsp; width:95%;&nbsp; &nbsp; background-color:#FFFEA5;&nbsp; &nbsp; padding-bottom: 80px;}.wrapperDiv{&nbsp; &nbsp; background-color: #006;&nbsp; &nbsp; padding:0;&nbsp; &nbsp; margin:0;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; }
0

慕桂英3389331

也许你可以尝试将所有这些 div 放入父 div 中，并将该 div 设置为 100% 宽度和高度（高度不是必需的，它也会设置 100%），然后你将拥有占据整个屏幕的 div 容器。
0

PIPIONE

我相信您丢失了并且需要身体标签（除其他外），它将整个背景设置为蓝色。body{background-color:#006}header{padding-bottom:5px;width:100%;position:fixed;top:0;z-index:100;height:70px;background-color:#006}.content{min-height: 100%;width:100%;background-color:#006;margin-top:70px;margin-bottom:60px }.content2{margin:auto;min-height: 100%;width:95%;background-color:#FFFEA5;padding-bottom: 20px;}.footer{text-align:center;width:100%;position:fixed;bottom:0;z-index:100;height:70px;background-color:#006}&nbsp; <html>&nbsp; <body>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; <div class="header"></div>&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; <div class="content2">test</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="footer"></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp;</body>&nbsp;&nbsp; &nbsp; </html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答