2-9作业 footer页脚怎么固定就会消失掉。

<!DOCTYPE html>
为什么我在footer内加position:fixed.这部分就消失了。
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin: 0; padding: 0;}
    body{text-align: center; font-size: 16px; color: red;border: 1px solid green;}
    .header{width: 100%;
        height: 100px;  
        background: url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) no-repeat;
        background-color: #000;
        position: fixed;
    }
    .header > dl > dd{ float: right; line-height: 100px; width: 76px;}
    .header > dl > dd a {text-decoration: none; color: #FFF;}
    .header > dl{margin:0 250px;}
    .c{clear: both;}
    /* content */
    .content{width: 100%;  padding-top: 100px;}

    .content > div > img{
        width: 100% ;
        height: 480px;
    }
     
       /* footer */

    .footer{
        width: 100%;
        height: 100px;
        background-color: #000;
        /*position: fixed;*/
    }
    .footer > dl > dd a {text-decoration: none; color: #FFF;}
    .footer > dl > dd{ float: left; line-height: 100px; width: 136px;}
    .footer > dl{margin:0 250px;}


  </style>
</head>
<body>
  <!-- 此处写代码 -->
    <!--- 头部 -->
    <div class="header">
        <dl>
            <dd><a href="#">频道</a></dd>
            <dd><a href="#">职业规划</a></dd>
            <dd><a href="#">实战</a></dd>
            <dd><a href="#">猿问</a></dd>
            <dd><a href="#">手记</a></dd>
        </dl>
        <div class="c"></div>
        
    </div>
    <div class="c"></div>
    
    <!-- content -->
    <div class="content">
        <div><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg) no-repeat"></div>
        <div><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg) no-repeat"></div>
        <div><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg) no-repeat"></div>
    </div>

    <!-- footer -->
    <div class="footer">
        <dl>
            <dd><a href="#">网站首页</a></dd>
            <dd><a href="#">企业合作</a></dd>
            <dd><a href="#">人才招聘</a></dd>
            <dd><a href="#">联系我们</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">友情链接</a></dd>
        </dl>
    </div>
</body>
</html>

CatCian 2018-01-08

源自：CSS网页布局基础 2-8 经典的两列布局

收起

2回答

小丸子爱吃菜 2018-01-08 15:59:37

给页脚设置position: fixed后，还需要再设置bottom:0;

收起回答

帝小君 #1

老师，我将页头和页脚都设置了position:fixed;并设置了top和bottom。页头会消失，但页脚正常，请问是怎么回事呢？

2018-01-19 18:21:20
小丸子爱吃菜回复帝小君 #2

请重新开辟一个新的问答，并粘贴你的代码，不要再这里盖楼

2018-01-19 18:28:56

小丸子爱吃菜 2018-01-08 15:34:27

还要添加一个bottom:0;

祝学习愉快！

收起回答

提问者 CatCian #1

你好，助教老师，我在content加上padding-bottom: 100px; 可是每次再footer内加上position: fixed；下面的页脚就会整个消失。不清楚为什么

2018-01-08 15:41:39
帝小君回复提问者 CatCian #2

会不会被content盖住了？可以给foot加一个z-index:999;试试

2018-01-19 20:49:04