content元素为什么加了padding-bottom还是会被foot元素覆盖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 25px;
font-weight: 700px;
}
.log {
width: 100%;
height: 100px;
background: black;
margin: 0 auto; /*水平居中*/
overflow: hidden;
position: fixed;top:0px;
}
img{float: left;}
.nav{float:right;text-align: center;line-height: 100px;}
.nav a{padding: 50px;text-decoration: none;color: #fff;}
.content{width: 100%;height: 100%;padding-top: 100px;padding-bottom:100px;}
.content img{width:100%;}
.foot{width: 100%;height: 100px;background: black;margin: 0 auto;position: fixed;bottom:0px;line-height: 100px;text-align: center;}
.foot a{padding: 50px;text-decoration: none;color: #fff;}
/*此处写代码*/
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="log">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a>
<div class="nav">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>
</div>
<div class="content">
<img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg">
<img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg">
</div>
<div class="foot">
<a href="#">教育中心</a>
<a href="#">合作中心</a>
<a href="#">人才招聘</a>
<a href="#">常见问题</a>
<a href="#">联系我们</a>
</div>
</body>
</html>4
收起
正在回答 回答被采纳积分+1
3回答
相似问题
只设置蓝色的浮动，为什么把黄色的覆盖
7
0
2
margin-top:50%,子元素为什么不相对父元素下移？
64
1
10
为什么轮播后图片覆盖在了当前区域其他元素上面？
4
0
3
子元素加外边距为撑大父元素吗
0
0
3
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星