footer宽度问题
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin: 0;
padding: 0;
text-decoration: none;
color: white;
}
/* body{
width: 1280px;
}*/
.header a,.header img{
display: block;
}
.header{
width: 100%;
height: 100px;
background: black;
position: fixed;
}
.logo{
float: left;
}
.nav{
float:right;
height: 100px;
overflow: hidden;
zoom: 1;
margin-right: 80px;
}
.nav ul li{
list-style: none;
height: 100px;
line-height: 100px;
margin-right: 60px;
float: left;
overflow: hidden;
}
.main img:nth-child(1){
margin-top: 100px;
}
.footer{
width: 100%;
height: 100px;
background: black;
text-align: center;
position: sticky;
bottom: 0;
line-height: 100px;
}
.footer a{
margin-right: 50px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.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>
<li><a href="#">手记</a></li>
</ul>
</div>
</div>
<div class="main">
<img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
</div>
<div class="footer">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
代码如上，用的chrome浏览器，为什么最终效果footer的宽度总是短一截呢？
正在回答
首先header设置了width:100%如下：
header没有设置width的结果是这样：
width属性是不具有继承性的，父元素的width不会影响到子元素的width，况且img是位于main里面的，它的父元素是main，就算给main设置了宽度100%，它的子元素还是不会继承它的宽高，还是保持它本来的宽高，以下是图片本来的宽高，你需要做的是人为设定它的宽度值使它充满屏幕。我的显示器分辨率是1920*1080，也可以给图片设置width:1080px喔
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星