我的底部栏为什么没能固定定位
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title ></ title > < style type = "text/css" > /* 设计稿要求header高度为100px 宽度为750px */ /* 设定一个方便计算的根元素值比如20,则header为5rem */ /* 需要等比例缩放时,只需要根据屏幕大小更改rem的值即可 */ * { padding: 0; margin: 0; } html { font-size: 40px; } .header-container{ height:2.5rem; background-color: rgba(222,24,27,.9); } .main-container{ padding: 2.5rem 0; /* 在设计图情况下 750px 为上下100px的头部和底部工具栏 所以需要设置为2.5rem则为100px*/ background-color: #eee; } .slider-container{ height: 9.15rem; background-color: green; } .nav-container{ height: 8.475rem; background-color: blue; } .recommend-container{ height: 50rem; background-color: pink; } .tabbar-container{ height: 2.5rem; } html,body{ width: 100%; height: 100%; } .header-container, .tabbar-container{ position: fixed; left: 0; z-index: 1000; width: 100%; } .header-container{ top: 0; } .tabbar-container{ bottom: 0; } </ style > </ head > < body > < div class = "header-container" > </ div > < div class = "main-container" > < div class = "slider-container" > </ div > < nav class = "nav-container" > </ nav > < div class = "recommend-container" > </ div > </ div > < div class = "tabbar-container" > </ div > < script type = "text/javascript" > </ script > < script src = "js/simple.js" type = "text/javascript" charset = "utf-8" ></ script > </ body > </ html > |
9
收起
正在回答
1回答
同学你好,底部栏已经固定在底部了,但是由于没有设置颜色,因此无法查看效果。建议添加背景颜色,如下:
如下:
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧