一个底部导航栏不用fixed根据页面高度一直固定到底部
时间: 2024-05-09 20:18:53 浏览: 78
纯css实现固定在网页底部菜单导航
可以使用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的样式,使得导航项可以水平居中并具有可点击的效果。
阅读全文