老师,为什么中间部分高度我无法设置啊?

老师,为什么中间部分高度我无法设置啊?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin:0;
      padding:0;
    }
    ul{list-style:none;}
    a{text-decoration:none;}
    .header{
        width:100%;
        height:100px;
        font-size: 25px;
        font-family: "微软雅黑";
        background:black;
        overflow:hidden;
        zoom:1;

    }
    .logo{
        float:left;
        width:200px;
    }
    .nav{
       float:right; 
       /*background: yellow;*/
       height:100px;
       line-height: 100px;
       overflow:hidden;
       zoom: 1;
    }
    .nav li{
      list-style: none;
      float:left;
      color:white;
      padding:0 10px;
      margin-right: 25px;
    }
    .main{
      font-size: 25px;
      font-family: "微软雅黑";
      background:#add8e6;
      overflow:hidden;
      zoom:1;
      width:100%
      height:100%;
    }
    .left{
      /*background: yellow;*/
      width:60%;
      float: left;
      margin-top: 100px;
    }
    .right{
      /*background:blue;*/
      width:40%;
      float:left;
      margin-top: 100px;
    }
    .left h3,.left ul{
      /*position: absolute;
      top:100px;
      left:200px;*/
      margin-left:200px;
      /*margin-top:10px;*/
    }
    .left ul,.left li{
      margin-top:10px;
    }
    .right ul,.right li{
      margin-top:10px;
    }
    .footer{
      width:100%;
      height:100px;
      line-height:100px;
      background:black;
      overflow:hidden;
      zoom:1;
      
    }
    .footer ul{
      width:800px;
      /*text-align:center;*/
      margin:0 auto;
    }
    .footer li{
      float:left;
      padding:0 10px;
      font-size:20px;
      font-family:"微软雅黑";
      color:white;
      margin-right:15px;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="logo"><a><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></a></div>
    <div class="nav">
      <ul>
        <li>课程</li>
        <li>职业路径</li>
        <li>实战</li>
        <li>猿问</li>
        <li>手记</li>
      </ul>
    </div>
  </div>
  <div class="main">
    <div class="left">
      <h3>课程推荐</h3>
      <ul>
        <li><span>职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</li>
        <li><span>职业路径</span>&nbsp;&nbsp;零基础入门Aandrid语法与界面</li>
        <li><span>职业路径</span>&nbsp;&nbsp;IOS基础语法与常用控件</li>
        <li><span>职业路径</span>&nbsp;&nbsp;PHP入门开发</li>
        <li><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</li>
      </ul>
    </div>
    <div class="right">
      <h3>相关课程</h3>
      <ul>
        <li>HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript</li>
        <li>HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;Jquery</li>
        <li>移动端基础&nbsp;&nbsp;移动端APP开发</li>
      </ul>
    </div>
  </div>
  <div class="footer">
    <ul>
      <li>网站首页</li>
      <li>企业合作</li>
      <li>人才招聘</li>
      <li>联系我们</li>
      <li>常见问题</li>
      <li>友情链接</li>
    </ul>
  </div>
</body>
</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
山河远阔ZZ 2019-01-10 15:18:03

百分比高度是根据父级高度算出来的,首先要html根设置了高度,下面的子元素才能根据跟元素的高度去算百分比。

山河远阔ZZ 2019-01-10 10:55:33

同学你好,经过测试,代码中有两个问题:

1、在css里面,写完一个css样式需要用“;”结尾,在代码里面,丢失了一个分号,如下图:

http://img1.sycdn.imooc.com//climg/5c36b3a30001e56805200213.jpg

更改代码如下:

http://img1.sycdn.imooc.com//climg/5c36b3bb0001297004080237.jpg

2、高度为100%没有实现,想要中间的内容高度为100%,需要在html上设置height:100%,body和页面中的height:100%才能生效,参考下图:

http://img1.sycdn.imooc.com//climg/5c36b410000137f102910131.jpg

自己测试一下,祝学习愉快,望采纳!

  • 提问者 ZPF_NEXT #1
    为什么html上也要设置100%了?
    2019-01-10 15:15:32
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师