首页一个底部导航栏不用fixed根据页面高度一直固定到底部

一个底部导航栏不用fixed根据页面高度一直固定到底部

时间: 2024-05-09 16:18:53 浏览: 75

可以使用flex布局实现底部导航栏不用fixed根据页面高度一直固定到底部。 HTML结构： ``` <body> <div class="wrapper"> <div class="content">页面内容</div> <div class="footer"> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul> </div> </div> </body> ``` CSS样式： ``` html, body { height: 100%; /* 设置html和body的高度为100% */ } .wrapper { display: flex; flex-direction: column; min-height: 100%; } .content { flex: 1; } .footer { background-color: #f2f2f2; padding: 10px; } .footer ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; } .footer li { flex: 1; text-align: center; } .footer li a { display: block; padding: 10px; text-decoration: none; } ``` 解释： 1. 使用flex布局，将.wrapper设置为`display: flex;`，并设置`flex-direction: column;`，使得.wrapper内部的元素可以按垂直方向排列。 2. 使用`min-height: 100%;`，使.wrapper的高度至少为100%，如果页面内容的高度小于100%，.footer也会跟随页面一起向下移动。 3. 将.content的flex属性设置为1，使其占据.wrapper剩余的空间。 4. 使用.footer作为底部导航栏。 5. 将ul设置为flex布局，使用`justify-content: space-between;`使得三个导航项之间的间距均匀分布。 6. 将li的flex属性设置为1，使得三个导航项的宽度相等。 7. 设置li a的样式，使得导航项可以水平居中并具有可点击的效果。

阅读全文