老师你好，我的页脚footer设置了固定定位之后，宽度发生了变化，去掉固定定位宽度就是百分百了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.header{width: 100%;height: 100px;background: #222;margin: 0 auto;position: fixed;top: 0;}.logo{/*background: url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) no-repeat;*/width: 300px;height: 100px;/*position: absolute;*/float: left;margin-left: 10px;}.header .nav-li ul{list-style: none;float: right;margin-right: 10px;}.header .nav-li ul li{display: inline-block;line-height: 100px;font-size: 24px;margin: auto 30px;font-family: "微软雅黑";}.header .nav-li ul li a{text-decoration: none;color: #fff;}.container img{width: 100%;display: block;}.footer{width: 100%height: 100px;background-color: #222;text-align: center;position: fixed;bottom: 0;}.footer ul li{display: inline-block;list-style: none;}.footer ul li a{text-decoration: none;color: #fff;line-height: 100px;margin: auto 20px;}</style></head><body><div class="header"><div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="logo"></a></div><div class="nav-li"><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="container"><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" alt="1"><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" alt="2"><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" alt="3"></div><div class="footer"><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><li><a href="#">友情链接</a></li></ul></div></body></html> |
0
收起
正在回答
2回答
同学你好， 由于设置固定定位之后脱离了文档流， 不再自适应窗口的宽度， 需要手动设置宽度百分百，才可以充满窗口的宽度。但是你给footer设置的width:100%属性后面没有添加封号， 导致宽度改属性没有生效，所以没有实现效果。 建议修改：
另， 因为头部和页脚设置固定定位，脱离文档流，导致中间图片部分被覆盖， 建议优化： 可以给中间内容设置上下外边距，给头部和页脚留出空白显示区域
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
Stronger16y
2019-08-19 15:54:44
知道错哪了。。宽度后面少了分号。真是太粗心了
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧