为什么我的背景宽度不能充满整个网页？
来源：2-8 主体部分的底部
qq_出局_0
2019-06-15 14:08:25
*{
padding:0;
margin:0;
}
.header{
width:100%;
height:100px;
background:white;
}
.logo{
height:100px;
float:left;
margin-left:100px;
}
.logo img{
height:100px;
}
.nav ul{
float:right;
font:20px '楷书';
height:100px;
}
.nav ul li{
list-style:none;
float:left;
margin-right:50px;
padding-top:20px;
}
a{
text-decoration:none;
color:darkgray;
}
.main .one1{
width:100%;
height:600px;
position:relative;
top:0;
left:0;
}
.main .one1 img{
width:100%;
height:600px;
position:absolute;
top:0;
left:0;
}
.main .one{
width:100%;
height:600px;
position:absolute;
top:100px;
left:0;
background:black;
opacity: 0.3;
z-index:1;
}
.main .two{
position:absolute;
top:400px;
left:50%;
width:500px;
height:300px;
margin-top:-150px;
margin-left:-250px;
z-index:2;
}
.main .two div{
font:bolder 45px '微软雅黑';
padding-top:50px;
text-align:center;
color:white;
}
.main .two button{
width:200px;
height:60px;
margin-top:50px;
font:bolder 14px '微软雅黑';
color:white;
background:darkorange;
margin-left:150px;
border-radius:8px;
clear:both;
}
.middle{
width:1000px;
margin:0 auto;
}
.middle .m-top .commen{
float:left;
width:33.3%;
padding-top:50px;
text-align:center;
}
.clear{
clear:both;
}
.middle .m-top .commen .comm{
font:20px bold;
padding-top:20px;
color:gray;
}
.middle .m-top .commen img{
width:100px;
height:100px;
}
.middle .m-middle{
height:100px;
text-align:center;
padding-top:50px;
color:#E19796;
font:italic bold 22px '微软雅黑';
}
.middle .m-bottom .m-com{
padding:10px;
float:left;
text-align:center;
font-size:20px;
font-weight:bold;
}
.middle .m-bottom .m-com img{
width:310px;
height:260px;
}
.middle .m-bottom .m-com .des1{
padding-top:20px;
color:#7d7d7f;
}
.middle .m-bottom .m-com .des2{
padding-top:10px;
color:#bdbdbc;
}
.middle .bottom{
background:gray;
width:1000px;
}
.middle .bottom .content{
width:1000px;
margin:0 auto;
}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<div class="logo"><img src="图片/logo.png"></div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</div>
<!--banner图部分-->
<div class="main">
<div class="one1"><img src="图片/1.jpeg"></div>
<!--遮罩层-->
<div class="one"></div>
<!--遮罩层文字-->
<div class=two>
<div>MY BEAUTIFUL LIFE</div>
<button>LOOK MORE ></button>
</div>
</div>
<!--中间部分-->
<div class="middle">
<div class="m-top">
<div class="commen weibo">
<img src="图片/weibo.png">
<div class="comm">MICROBLOG</div>
</div>
<div class="commen weixin">
<img src="图片/weixin.png">
<div class="comm">WECHAT</div>
</div>
<div class="commen qq">
<img src="图片/QQ.png">
<div class="comm">QQ</div>
</div>
</div>
<div class="clear"></div>
<div class="m-middle">
"I want to give good things to record down,<br>
after the recall will be very beautiful."
</div>
<div class="m-bottom">
<div class="m-com">
<img src="图片/03-01.jpg">
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="图片/03-02.jpg">
<div class="des1">Great Picture</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="图片/03-03.jpg">
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
<div class="clear"></div>
</div>
<!--中间的底部部分-->
<div class="bottom">
<div class="content">
<div class="titile">FROM THE PHOTO ALBUM</div>
<div class="pic-content">
<dl>
<dt><img src="图片/04-01.jpg"></dt>
<dd>Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.</dd>
<dt><img src="图片/04-02.jpg"></dt>
<dd>Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.</dd>
</dl>
</div>
</div>
</div>
</div>
<!--页面底部-->
<div class="footer"></div>
1回答
-
Miss路
2019-06-15
同学， 你好。
你是说bottom所在的div这块区域就算是设置成100%也不能充满整个屏幕吗？你现在设置的是1000px：
改成100%还不能充满屏幕的原因是，给bottom的父元素middle也设置了1000px，100%的宽度是相对于父元素来说的，所以bottom还是1000px，不会充满屏幕：
你也可以参考一下源码对比一下。
这里就是不能全屏显示的，就是要居中一点的。
如果帮助到了你，欢迎采纳！
祝学习愉快！
0
相似问题