设置的底部栏为什么没有固定效果呢
麻烦老师问一下，我设置了footer底部栏的position属性为fixed，但为什么没有效果呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css布局1</title>
<style type="text/css">
/*此处写代码*/
*{margin:0;
padding:0;
}
.nav{
width:1100px;
height:100px;
background-color:black;
color:white;
position:fixed;
}
.logo{
float:left;
}
.menu{
float:right;
line-height:100px;
}
.menu li{display:inline;
margin:30px;
}
a:link{color:white;
text-decoration:none;
}
.body{padding-top:100px;}
.body img{width:1100px;
}
.footer{
width:1100px;
height:100px;
background-color:black;
color:white;
line-height:100px;
text-align:center;
margin-bottom:0;
position:fixed;
}
.footer li{display:inline;
margin:30px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="nav">
<div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg/58c0d2d900016ce303000100.png"></a></div>
<div class="menu">
<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>
<div class="body">
<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="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>
正在回答 回答被采纳积分+1
同学你好，代码中有如下问题：
1. 整个页面没有全屏显示：
建议调整头、中间、尾部的内容宽度为100%，如下：
2. 优化建议：
logo左侧a标签没有包裹图片：
原因是图片具有特殊性，它撑不开a标签。
建议将图片和a标签都转成块级元素，如下：
3. 图片之间有间隙：
原因是图片是行内元素，底部有默认的间隙。
可通过将其转成块级元素消除间隙：
4. 页脚不显示（问题回复）：
原因是页面设置定位后，没有设置具体的位置，所以它就在页面视野外布局了，因此看不见。
需要添加位置，如下：
5. 页脚会覆盖在中间内容上：
建议给中间内容添加底边距，如下:
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星