将bar固定在底部是一个非常常见的需求，比如分页器。于是，今天就来说一说有哪些方法能够将bar固定在底部。
fixed法
这是最简单的，但同时缺陷也最大，因为fixed元素的百分比宽度是相对于浏览器视口来计算的，因此如果出现像下面这样的布局，fixed元素将无法实现宽度自适应父容器的需求。
<body>
<aside>侧边栏</aside>
<main>
主体内容
<div class="pagination">
分页器
</div>
</main>
</body>
<style>
.pagination {
position: fixed;
/* 相对于浏览器视口，而不是<main> */
width: 100%;
}
</style>
absolute法
absolute法解决了fixed法中底部条宽度无法自适应的问题，但仍然有缺陷，那就是得指定底部条的高度。
<body>
<aside>侧边栏</aside>
<main>
主体内容
<div class="pagination">
分页器
</div>
</main>
</body>
<style>
main {
position: relative;
height: 100vh;
padding-bottom: 40px;
}
.pagination {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
}
</style>
flex法
flex法既可以宽度自适应，也可以不指定底部条的高度，一般推荐使用这种方法。
<body>
<aside>侧边栏</aside>
<main>
<div class="content">
主体内容
</div>
<div>
分页器
</div>
</main>
</body>
<style>
main {
height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}
</style>