高度塌陷问题 老师帮忙看下 感谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin:0; padding:0;}
.header{
width:100%;
height:100px;
background: black center;
overflow: hidden;
zoom: 1;
position: fixed;
top: 0;}
.header img{
float: left;}
.header ul{float: right;}
.header ul li{
list-style-type:none;
display:inline-block;
line-height: 100px;
margin-right: 50px;
font-size: 20px;
margin-top: -16px;}
.header ul li a{
text-decoration:none;
color: white;}
.container{
width: 100%; background: lightblue;
overflow: hidden;
zoom: 1;
}
.left{
width:30%; height: 1000px; background: lightblue;float: left;}
.middle{
width: 30%; height: 1000px; background: lightblue;float: left;}
.right{
width: 38%; height: 1000px; background: lightblue;float: right;
border-left: 10px solid orange;}
.footer{
width: 100%;
height: 160px;
background: black center;
text-align: center;
position: fixed;
bottom: 0;
}
.footer ul{
width: 100%;
height: 100px;
margin-top: 0;
margin-bottom: 0;
}
.footer ul li{
display:inline-block;
list-style-type: none;
line-height: 100px;
font-size: 20px;
margin: 30px;
}
.footer ul li a{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"/>
<ul>
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="footer">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</body>
</html>
正在回答
同学你好，是指中间部分吗？如下，这里中间部分并没有高度塌陷，放到该元素查看，还是1000px，不过顶部与底部设置定位所以中间部分看起来不是1000px的，需要滑动来看到内容哦。
另，顶部与底部脱离文档流与中间部分重合，建议：可以给中间部分设置上下的外边距，值分别于顶部与底部的高度相等，例：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星