如何使内容div全屏
Posted
技术标签:
【中文标题】如何使内容div全屏【英文标题】：How to make content div full screen 【发布时间】：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
【参考方案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%;
【讨论】：
以上是关于如何使内容div全屏的主要内容，如果未能解决你的问题，请参考以下文章