老师你好,我的页脚footer设置了固定定位之后,宽度发生了变化,去掉固定定位宽度就是百分百了
<!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积分~
来为老师/同学的回答评分吧
0 星