老师,请问内容如何设置百分之百,撑起内容的高度?

老师,请问内容如何设置百分之百,撑起内容的高度?

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>幕课网双列布局</title>
   <style type="text/css">
*{
           margin:0;
}
       .total{
           background-color:#80ffff;
}
       .top{
           width:100%;
height:100px;
background-color:#000;

}
       .right{
           float:right;
line-height:100px;
}
       .right a{
           text-decoration:none;
font-size:25px;
color: #ffffff;
padding:20px;
}
       .content{
           width:70%;
height:auto;
margin:0 auto;
padding-top:100px;
font-weight:900;
}
       .left-one{
           width:65%;
height:auto;
}
       .left-one h2{
           margin-bottom:10px;
}
       .left-one p{
           margin:10px 0;
}
       .left-one p span{
           margin-right:20px;
background-color:#ff9d6f;
}
       .right-one{
           float:right;
margin:-179px 200px 0 0;
}
       .right-one h2{
           margin-bottom:18px;
}
       .right-one p{
           margin:18px 0;
}
       .right-one p span{
           margin-right:15px;
}
       .bottom{
           width:100%;
height:100px;
background-color:#000;
margin-bottom:0;
text-align:center;
line-height:100px;
}
       .bottom a{
           text-decoration:none;
font-size:25px;
color:#fff;
padding:0 20px;
}
   </style>
</head>
<body>
<div class="total">
   <div class="top">
       <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="幕课网logo">
       <div class="right">
           <a href="https://cn.bing.com/">课程</a>
           <a href="https://cn.bing.com/">职业路径</a>
           <a href="https://cn.bing.com/">实战</a>
           <a href="https://cn.bing.com/">猿问</a>
           <a href="https://cn.bing.com/">手记</a>
       </div>
   </div>
   <div class="content">
       <div class="left-one">
           <h2>课程推荐</h2>
           <p><span>职业路径</span>HEML5与CSS3实现动态网页</p>
           <p><span>职业路径</span>零基础入门Android语法与界面</p>
           <p><span>职业路径</span>ios基础语法与常用控件</p>
           <p><span>职业路径</span>PHP入门开发</p>
           <p><span>职业路径</span>JAVA入门开发</p>
       </div>
       <div class="right-one">
           <h2>相关课程</h2>
           <p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
           <p><span>html5</span><span>css3</span><span>Jquery</span></p>
           <p><span>移动端基础</span><span>移动端APP开发</span></p>
       </div>
   </div>
   <div class="bottom">
       <a href="http://lol.qq.com/">网页首页</a>
       <a href="http://lol.qq.com/">企业合作</a>
       <a href="http://lol.qq.com/">人才招聘</a>
       <a href="http://lol.qq.com/">联系我们</a>
       <a href="http://lol.qq.com/">常见问题</a>
       <a href="http://lol.qq.com/">友亲链接</a>
   </div>
</div>
</body>
</html>

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

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

2回答
怎么都被占用了呢 2017-10-10 15:36:11

这个就需要自己慢慢调试了,这里设置为700px就差不多了,并建议页脚部分设置为绝对定位,定在页面的下方。

http://img1.sycdn.imooc.com/climg/59dc78630001133503240189.jpghttp://img1.sycdn.imooc.com/climg/59dc7869000149b504210257.jpg


  • 提问者 桂靖 #1
    谢谢老师!
    2017-10-10 16:40:04
樱桃小胖子 2017-10-10 11:18:50

这里建议设置min-height最小高度。单独设置100%是不起作用的,祝学习愉快~

  • 提问者 桂靖 #1
    min-height:设置100%吗?
    2017-10-10 12:52:01
  • 樱桃小胖子 回复 提问者 桂靖 #2
    单位使用px。不使用100%
    2017-10-10 13:49:33
  • 提问者 桂靖 回复 樱桃小胖子 #3
    如果使用px的话那一个网页的视口是多少px呢?还是有其他方法能计算的呢?
    2017-10-10 14:37:49
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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