我给外层的设置了width:100%;浏览器最大化的时候没有问题,只要缩小浏览器外层的div就缺了一块不知道为什么。(抱歉,本来想用runjs分享代码,但是今天怎么进不去runjs。)
<footer>
<div class="footer">
<div class="left">
<ul>
<li><a href="#">综合要闻</a></li>
<li><a href="#">图片新闻</a></li>
<li><a href="#">典型案例</a></li>
<li><a href="#">视频播报</a></li>
</ul>
<ul>
<li><a href="#">扫黄打非</a></li>
<li><a href="#">政策法规</a></li>
<li><a href="#">执法动态</a></li>
<li><a href="#">曝光台</a></li>
</ul>
<ul>
<li><a href="#">队伍建设</a></li>
<li><a href="#">办案指南</a></li>
<li><a href="#">工作研讨</a></li>
</ul>
</div>
<img src="Images/yakeshilogo.png"/>
<img src="Images/erweima.jpg" width="74px" height="74px" class="weixing">
<ul class="sao">
<li> 微信扫一扫</li>
<li>关注官网微信公众号</li>
</ul>
</div>
</footer>
<div class="clear"></div><!--------------清除浮动------------------>
<div class="bottom">
<ul>
<li>版权所有:牙克石文化市场综合执法大队 |</li>
<li>地址:牙克石市胜利西街1号 |</li>
<li>举报电话:0470-7309292 12318 |</li>
<li>备案编号:蒙ICP备16001653号 |</li>
<li>邮编:022150 |</li>
<li>copyright©2016 牙克石文化执法</li>
</ul>
</div>
css
.footer{ width:1200px; height:130px; margin:0 auto; }
.left{ width:500px; height:130px; float:left; }
.left ul{ float:left;}
.left ul a{ display:block; width:100px; margin-top:13px; color:#c3c6cb;}
.left ul li{ margin-left:40px; }
.footer img{ float:left; margin-top:45px; margin-left:-50px;}
.footer .weixing{ margin-top:30px; margin-left:100px; }
.footer .sao{ padding-top:45px; width:150px; float:left; margin-left:26px; color:#c3c6cb;}
.footer .sao li:nth-child(1){ background:url(../Images/wechat.png) no-repeat;}
.bottom{ width:100%; height:50px; background:#262a2d;}
.bottom ul{ width:1300px; height:25px; margin:0 auto; }
.bottom ul li{ float:left; color:#cfcfcf; margin-left:10px; line-height:50px;}
因为body的宽度一直和浏览器窗口大小一致,浏览器缩小后body的宽度变窄,那个footer的宽度100%是和body一致,所以footer会变窄。
给body设置min-width
body{
min-width: 960px;/*你需要的宽度*/
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。