当缩放页面时，页脚和内容有较大的空白，怎么消除呢

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行布局2-7demo</title>
<style type="text/css">
    /*此处写代码*/
    *{
        margin:0;
        padding:0;
    }
    /*header 部分*/
    ul{
    list-style:none;
    }
    div.header{
        width:100%;height:100px;
        position:fixed;
        background-color:black;
        overflow: hidden;
        zoom:1;
    }
    div.logo{
        width:300px;
        height:100px;
       float: left;
    }
    div.logo img{
      display: block;
    }
    .nav{
      float:right;
      color: #ffffff;
      overflow:hidden;
    }
     .nav li{
      float: left;
      margin-right: 20px;
   }
    .nav li a{
      text-decoration: none;
     padding: 0 20px;
     color: #ffffff;
     height:100px;
     line-height: 100px;
     display: block;
     font-size: 16px;

    }
    /*banner部分*/
    div.banner{
       width:100%;
       height:888px;
         padding-top:100px;
         padding-bottom:80px;
    }
    div.banner img{
       width:100%;
       display: block;
    }
    /*footer部分*/
    div.footer{
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: black;
    position: fixed;
    bottom:0;
    }
    a{text-decoration: none; color: #fff;}
    div.footer ul{
       width: 984px;
       margin: 0 auto
    }
    div.footer ul li{
       float: left;
        display:inline-block;
       padding: 0 50px;
    }

</style>
</head>
<body>


    <div class="header">
      <div class="logo">
         <a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a>
      </div>

          <ul class="nav">
              <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 class="banner">
   <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/>
   <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/>
</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>

抓住这只猪 2019-04-23

源自：CSS网页布局基础 2-7 编程练习

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2019-04-24 10:24:06

同学你好，代码实现效果是不错的。

同学是使用哪个浏览器进行缩放的呢，是页面进行缩放吗？这边使用Chrome浏览器测试没有这种效果：

并且页面一般都是不会缩放的，在100%下正常显示就可以。

祝学习愉快！

收起回答

抓住这只猪提问者 #1

是用火狐说错了是调整整体网页页面的大小不是页面的alt放大缩小有点像响应式的说法

2019-04-24 11:35:56
好帮手慕星星回复提问者抓住这只猪 #2

如果是调整浏览器宽度大小的话，哪个浏览器都是这种效果哦，因为img图片设置宽度为100%，高度会跟着自身宽高比一起改变的，所以下面会有空隙。这种情况是正常的，不需要调整。

2019-04-24 13:44:41