页脚有空隙怎么消除，在网页调整大小的时候，如何做到自适应

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    /*此处写代码*/
    /*全局部分*/
    *{margin: 0;padding: 0;}
    .container{
       width: 100%;
       height: 728px;
       background-color: #add8e6;
    }
    ul{list-style-type:none; }
    /*导航部分*/
    .header{
       width: 100%;
       height: 100px;
       background-color: black;
    }
    .logo{
       width: 300px;
       height: 100px;
       float: left;
    }
    img{
       display: block;
    }

    .list{

        float: right;
        margin-right: 20px;

    }
    .list li{
       height:100px;
         line-height: 100px;
         margin:0 20px;
        float: left;
       color: #fff;
    }
    /*内容部分*/
    .mainer{
       width: 100%;
       height: 548px;

    }
    .left{
       width: 35%;
        float: left;
        height: 498px;

       padding-top:50px;
    }
    .middle{
        width:35%;
         float: left;
        height: 498px;

       padding-top:50px;

    }
    .right{
       width: 29.5%;
       float:left;
      height: 498px;
       padding-top:50px;

       border-left:0.35em solid orange;
    }
    span{
       display: inline-block;
   background-color:#ff9999;
   margin-right:10px;
}
p{   margin: 25px;}
input{
   display: block;
   width: 220px;
   height: 35px;
   margin:20px;
}
form{
   margin-left:50px;
}
.special{
   background-color: red;
   color: #fff;
   border:none;

}
.move{
   margin-left:100px;
}
    /*页脚部分*/
   .footer{
    width: 100%;
    height: 80px;
    background-color: black;
    text-align: center;

}

   .list_2{
   display: inline-block;
   }
   .list_2 li{
    float: left;

   padding: 0 50px;
   height: 80px;
   line-height: 80px;
   color: #fff;
   }
</style>
</head>
<body>

<div class="container">
   
   <div class="header">
       <div class="logo">
           <img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"/>
       </div>
       <ul class="list">
           <li>课程</li>
           <li>职业路径</li>
           <li>实战</li>
           <li>猿问</li>
           <li>手记</li>
       </ul>
   </div>
   
   <div class="mainer">
       <div class="left">
             <div class="move">
               <h3>    课程推荐</h3>
           <p><span>职业路径</span>HTML5与CSS3实现动态网页</p>
           <p><span>职业路径</span>零基础入门Android语法与界面</p>
           <p><span>职业路径</span>iOS基础语法与常用控件</p>
           <p><span>职业路径</span>PHP入门开发</p>
           <p><span>职业路径</span>JAVA入门开发</p>
           </div>
       </div>
       <div class="middle">
<div class="move">
           <h3>    相关课程</h3>
           <p>HTML  CSS  JavaScript</p>
           <p>HTML5  CSS3  Jquery</p>
           <p>移动端前端  移动端APP开发</p>
</div>
   </div>
       <div class="right">

           <form>
               <h3>   登录</h3>
               <input type="text" name="name"
               placeholder=" 请输入登录邮箱/手机号">
               <input type="password" name="password"
               placeholder=" 6-16位密码，区分大小写，不用空格">
               <input type="submit" name="login" value="登录" class="special">
           </form>
       </div>
   </div>
   
   <div class="footer">
       <ul class="list_2">
           <li>网站合作</li>
           <li>企业合作</li>
           <li>人才招聘</li>
           <li>联系我们</li>
           <li>常见问题</li>
           <li>友情链接</li>
       </ul>
   </div>
</div>
</body>
</html>

希望老师可以给出代码能优化的地方

抓住这只猪 2019-04-25

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

收起

2回答

好帮手慕码回答被采纳获得+3积分 2019-04-26 11:13:55

同学你好！

如果想要做到高度自适应可以做以下修改：

当网页调整大小的时候，为了不让内容掉落出去可以设置一个最小宽度：

现阶段可以这么设置。后面学习了响应式布局即可使用flex

如果帮助到了你欢迎采纳祝学习愉快~

收起回答

抓住这只猪提问者 #1

另外页脚利用行内块元素设置了水平居中的时候页脚下面出现空隙怎么办

2019-04-26 11:49:49

好帮手慕码 2019-04-26 13:04:33

同学你好！

请问同学说页脚的空隙是在修改前的代码里还是修改后的代码里存在的呢？修改后的代码老师测试过页脚是没有空隙的~

另，如果是页脚设置了行内块产生了空隙，那可以修改成块级元素浮动也是可以实现效果的，且不会产生空隙。如果还是有问题同学可以粘贴代码和效果图片，老师可以有针对性的，查找这个问题所在

祝学习愉快~

收起回答

提问者抓住这只猪 #1

在修改代码前，我给页脚的ul元素设置了行内块元素是为了实现水平居中的效果如果设定了块元素给ul 并不会实现页脚内容的水平居中

2019-04-26 21:54:49
提问者抓住这只猪 #2

说错了是垂直居中

2019-04-26 22:35:01
提问者抓住这只猪 #3

又错了是水平居中水平居中

2019-04-26 22:35:57