为了账号安全,请及时绑定邮箱和手机立即绑定

如何让内容div全屏显示

如何让内容div全屏显示

紫衣仙女 2023-10-17 17:34:08
我有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 是全屏的,或者它不包含任何内容,我执行了上面的代码但没有工作,它看起来像附加的图像。
查看完整描述

3 回答

?
慕姐4208626

TA贡献1852条经验 获得超7个赞

我更改了 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%;

        }



查看完整回答
反对 回复 2023-10-17
?
慕桂英3389331

TA贡献2036条经验 获得超8个赞

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



查看完整回答
反对 回复 2023-10-17
?
PIPIONE

TA贡献1829条经验 获得超9个赞

我相信您丢失了并且需要身体标签(除其他外),它将整个背景设置为蓝色。


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>


查看完整回答
反对 回复 2023-10-17
  • 3 回答
  • 0 关注
  • 163 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信