如何使内容div全屏答案

【问题标题】：How to make content div full screen如何使内容div全屏
【发布时间】：2020-07-09 09:09:02
【问题描述】：

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

【问题讨论】：

你能告诉我们不同的div元素会包含什么，以便更容易看出哪个div影响了高度吗？
@TylerHarrison Sir 如图所示。内容 div 不是全屏的，我想在页眉和页脚之间填充
可能是margin-bottom: //whatever minus amout，因为获取间隙的高度并做一个负边距，然后padding-bottom: //whatever amout 来填补那个间隙。
你想让div.content2覆盖整个屏幕吗？试试height:100vh

标签： html css fullscreen

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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%;
        }

【讨论】：