老师,请问内容如何设置百分之百,撑起内容的高度?
<!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
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程


恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星