请问我把.left,.right.middle的height值都设置成100%，为什么不显示了？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
/*页头*/
.header{float:left;width:100%;background:black;height:100px;line-height:100px;}
.logo{background:url("http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png") center no-repeat;
width:300px;height:100px;float:left;}
.nav{color:white;height:32px;width:400px;float:right;line-height:100px;margin-top: 34px;}
.nav-li{float:right;width:64px;height:32px;text-align:center;line-height:32px;}
a{text-decoration:none;color:white;}
/*主体*/
.main{padding-top:100px;width:100%;height:100%;}
.middle{width:40%;height:1000px;background-color:#1a5acd;float:left;}
.left{width:30%;height:1000px;background-color:#f00;float:left;}
.right{width:30%;height:1000px;background-color:#30a457;float:left;}
/*页脚*/
.footer{float:left;width:100%;background:black;height:100px;line-height:100px;}
.foot-li{width:640px;height:100px;position:absolute;left:50%;margin-left:-320px;}
.list{color:white;float:left;text-align:center;width:128px;height:100px;line-height:100px;}
/*此处写代码*/
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav">
<div class="nav-li"><a href="#">课程</a></div>
<div class="nav-li"><a href="#">职业路径</a></div>
<div class="nav-li"><a href="#">实战</a></div>
<div class="nav-li"><a href="#">猿问</a></div>
<div class="nav-li"><a href="#">手记</a></div>
</div>
</div>
<div class="main">
<div class="middle">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="footer">
<div class="foot-li">
<p class="list">联系我们</p>
<p class="list">人才招聘</p>
<p class="list">合作伙伴</p>
<p class="list">相关链接</p>
<p class="list">公司地址</p>
</div>
</div>
</body>
</html>（宽高的百分比是参照什么设置的？)
13
收起
正在回答
2回答
如果父级也是百分比，那就要看父级的父级有没有高度了，如果有，就可以，如果没有，也是无用的。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星