关于html布局问题。

问题描述

问 题

我给外层的<footer>设置了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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微信扫一扫</li>
            <li>关注官网微信公众号</li>
           </ul>
         </div> 
     </footer>  
     <div class="clear"></div><!--------------清除浮动------------------>
    <div class="bottom">
         <ul>
           <li>版权所有：牙克石文化市场综合执法大队&nbsp;&nbsp;&nbsp;|</li>
           <li>地址：牙克石市胜利西街1号 &nbsp;&nbsp;&nbsp;|</li>
           <li>举报电话：[phone] 12318&nbsp;&nbsp;&nbsp;|</li>
           <li>备案编号：蒙ICP备16001653号&nbsp;&nbsp;&nbsp;|</li>
           <li>邮编：022150&nbsp;&nbsp;&nbsp;|</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;/*你需要的宽度*/
}

这篇关于关于html布局问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！