3-3 老师,为什么主体占屏不是100%,而且滚动时会覆盖导航栏?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        margin:0;
        padding:0;
    }
    .header,.footer{
        width:100%;
        height:100px;
        background-color:#000;
        position:fixed;
        color:#fff;
    }
    
    .footer{
        bottom:0;
    }
    
    .footer ul{
        width: 780px;
        margin:0 auto;
    }
    
    .logo{
        cursor:pointer;
        float:left;
    }
    
    .ul{
        position:absolute;
        right:0;
        top:0;
    }
    
    ul{
        list-style-type:none;
    }
    
    ul li{
        float:left;
        margin:0 25px;
        font-size: 26px;
        line-height: 100px;
    }
    
    ul li:hover{
        cursor:pointer;
        color:orange;
    }
    
    .content{
        padding:100px 200px 0 220px;
        color: #000;
        margin:0 auto;
        min-width:900px;
    }
    .left,.middle,.right{
        position:relative;
        float:left;
        min-height:500px;
    }
    .middle{
        width:100%;
        background-color:rgb(255,192,203);
    }
    .middle img{
        position:absolute;
        top:0;right:0;bottom:0;left:0;
        margin:auto;
    }
    .left{
        width:220px;
        margin-left:-100%;
        left:-220px;
        background-color:rgb(255,239,219);
    }
    .right{
        width:220px;
        margin-left:-220px;
        right:-220px;
        background-color:rgb(173,216,230);
    }
    
    .content-left,.content-right,.content-middle{
        margin:50px;
        line-height:2em;
    }
    
    .content-left span{
        background-color:rgb(255,150,150);
    }
    
    .content-right input{
        width:90%;
        height:30px;
        display:block;
    }
    
    .content-right .sign{
        background-color:red;
        color:#fff;
        border:none;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="header">
      <div class="logo">
          <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
      </div>
      <div class="ul">
          <ul>
            <li><a>课程</a></li>
            <li><a>职业路径</a></li>
            <li><a>实战</a></li>
            <li><a>猿问</a></li>
            <li><a>手记</a></li>
         </ul>
      </div>
  </div>
  <div class="content">
      <div class="middle">
        <div class="content-middle">
            <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg" />
        </div>
      </div>
    <div class="left">
        <div class="content-left">
            <h1>课程推荐</h1>
            <p><span>职业路径</span>html与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="right">
        <div class="content-right">
            <h1>登录</h1>
            <input type="text" placeholder="请输入邮箱/手机号" size="25"/><br/>
            <input type="password" placeholder="6-16位密码,区分大小写,不能用空格" size="25"/><br/>
            <input type="button" value="登录"  class="sign"/>
        </div>
    </div>
  </div>
  <div class="footer">
          <ul>
            <li><a>网站首页</a></li>
            <li><a>企业合作</a></li>
            <li><a>人才招聘</a></li>
            <li><a>联系我们</a></li>
            <li><a>友情链接</a></li>
         </ul>
  </div>
</body>
</html>

都不服vew 2018-03-08

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