老师,这样让高度刚好填满一个屏幕呢

老师,这样让高度刚好填满一个屏幕呢

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

 <style type="text/css">

    *{margin:0;padding;font-family:"黑体";}

    .header ul li{

        display:inline;

        padding:0 5px;

        color:white;

        

    }

    .footer ul li{

        display:inline;

        padding:0 5px;

        color:white;

        

    }

    .header ul{

        float:right;

        padding-right:20px;

        height:100px;

        text-align:center;

        line-height:100px;

    }

    .header{

        width:100%;

        min-width:800px;

        height:100px;

        background:black;

    }

    .clear{

        width:100%;

        background:#499;

    }

    .content{

        width:80%;

height:700px;

        max-height:468px;

        margin:0 auto;

    }

    .left{

        width:50%;

        min-width:270px;

        height:250px;

        float:left;

        padding-top:100px;

        /*border:1px solid gray;*/

    }

    

    .left ul li{

        padding:10px 5px;

        list-style-type:none;

    }

    .right{

        width:50%;

        padding-top:100px;

        min-width:270px;

        height:250px;

        float:right;

        /*border:1px solid gray;*/

    }

   

    .right ul li{

        padding:10px 5px;

        list-style-type:none;

    }

.clear{

clear:both;}

    span{

        border:1px dashed gray;

        background:pink;

        font-size:16px;

        color:black;

    }

    .footer{

        text-align:center;

        background:black;

        width:100%;

        min-width:800px;

        height:60px;

        line-height:60px;

/*position:fixed;

bottom:0;*/    

    }

  </style>

</head>

<body>

    <div class="header">

        <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/>

        <ul>

            <li>课程</li>

            <li>职业路径</li>

            <li>实战</li>

            <li>猿问</li>

            <li>手记</li>

        </ul>

    </div>

    <div class="clear">

    <div class="content">

        <div class="left">

            <h3>&nbsp;&nbsp; 课程推荐</h3><br/>

            <ul>

                <li><span>职业路径</span> html5与css3实现动态网页</li>

                <li><span>职业路径</span> html5与css3实现动态网页</li>

                <li><span>职业路径</span> html5与css3实现动态网页</li>

                <li><span>职业路径</span> html5与css3实现动态网页</li>

                <li><span>职业路径</span> html5与css3实现动态网页</li>

            </ul>

        </div>

        <div class="right">

        <h3>&nbsp;&nbsp; 相关课程</h3><br/>

            <ul>

                <li>html css javascript</li>

                <li>html5 css3 jq</li>

                <li>移动端基础 移动端APP开发</li>

            </ul>

        </div>

        

    </div>

    </div>

    

    <div class="footer">

        <ul>

            <li>网站首页</li>

            <li>企业合作</li>

            <li>人才招聘</li>

            <li>联系我们</li>

            <li>常见问题</li>

            <li>友情链接</li>

        </ul>

    </div>

</body>

</html>


正在回答

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

2回答

这里不需要刚好去占满哦,一般网站不会刚好占满的,这里只需要懂的基本的布局就可以了。如果你非要占满的话,可以用vh单位,这是一个相对单位,整个网页的全部高度是100vh,你合理分配一下试试。

祝学习愉快!

提问者 嘿嘿嘿等 2018-03-23 12:18:00

非常感谢!

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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