Question

我有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为全屏显示，或者它不包含任何内容，我在上面做了代码，但是没有用，它看起来像附加的图像。

Answer 1

也许您可以尝试将所有这些div放入父div之类，并将其设置为该div的宽度和高度为100％（高度不是必需的，它也将设置为100％），然后您将使div容器占据所有屏幕

Answer 2

我相信您不见了，需要身体标记（除其他外），它将整个背景设置为蓝色。

import [module name]

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}

Answer 3

谢谢大家，我更改了css文件并使它像这样，现在可以使用了：

 .header{
    padding-bottom:5px;
    width:100%;
    position:fixed;
    top:0;
    z-index:100;
    height:70px;
    background-color:#006}
.footer{
    text-align:center;
    width:100%;
    position:fixed;
    bottom:0;
    z-index:100;
    height:70px;
    background-color:#006}
.content{
    min-height: 100%;
    width:100%;
    background-color:#FFFEA5;
    margin-top:70px;
    margin-bottom:60px }
.content2{
    height: 100%;
    margin:auto;
    width:95%;
    background-color:#FFFEA5;
    padding-bottom: 80px;
}
.wrapperDiv{
    background-color: #006;
    padding:0;
    margin:0;
    height: 100%;
        }

如何使内容div全屏显示

3 个答案: