页面头部、底部都是使用fixed做固定，目前实现效果如图整个页面最外层有一个大的div包裹，我将这个包裹div的width:90%;margin:0 auto;问题①.顶部div的width:100%;position: fixed;此时顶部并没有水平居中（width:100%并没有相对包裹div的width:90%来算），如何让顶部div水平居中显示？问题②.底部使用fixed，如何使它与页面内容对齐，并且不会出现覆盖页面内容的部分高度（就是图中红色②标记的那块底部的高度）？以下是html/css代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; color: #fff; } .container{ width: 800px; height: 1000px; background: #4c77f2; margin: 0 auto; padding-top: 40px; text-align: center; } .header{ width:100%; position: fixed; height: 40px; background: #414141; text-align: center; font-size: 16px; line-height: 40px; } .footer{ width: 800px; height: 100px; background: #333; margin: 0 auto; text-align: center; font-size: 16px;position:fixed;bottom:0; } </style></head><body><div style="margin:0 auto;width:90%;"> <div class="header">这是页面头部</div> <div class="container"> 这是页面内容 </div> <div class="footer">这是页面底部</div></div> </body></html>
1 回答
已采纳
橋本奈奈未
TA贡献436条经验 获得超108个赞
fixed是相对整个窗口的，width的计算也是，所以如果你要保持和div一样那就设置一样的值。
定位之后margin: 0 auto就没用了，可以使用left:50%;transform: translateX(-50%)居中
因为定位之后元素脱离的正常的文档流，所以会覆盖到地下的内容，那么可以把地下那个空间留出来即可，margin-bottom,padding-bottom都可以，但是比较好的做法是在fixed元素外层套一层div
<footer> <div> 这个div fixed </div> </footer>
然后高度给的是footer这个元素，而div的height设置为inherit。
- 1 回答
- 0 关注
- 1036 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消