如何使内容div全屏显示

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中，并将其设置为该div的宽度和高度为100％（高度不是必需的，它也将设置为100％），然后您将使div容器占据所有屏幕。

Answer 2

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

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}

  <html>
  <body>
    <div class="container">
    <div class="header"></div>
    <div class="content">
    <div class="content2">test</div>
    </div>
    <div class="footer"></div>
    </div>
     </body> 
    </html>

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全屏显示

问题描述投票：0回答：3

3个回答

最新问题

如何使内容div全屏显示

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3