把底部导航栏固定在底部

猜测7

已于 2023-01-09 16:07:57 修改

阅读量2.7k

点赞数

文章标签： javascript 前端 css3

于 2022-01-12 14:31:57 首次发布

本文链接：https://blog.csdn.net/guozhicaice/article/details/122452369

版权

在一个老项目中，突然发现它底下的footer居然是用js去固定的，在页面加载后和窗体变动的时，去判定它位置是否超过界面总高度，以此添加position: fixed的css来固定在最底部。

这种方式既过时又存在BUG，有一个页面本身高度不够，通过JQuery请求到了参数之后，高度又超了，此时的$(window).resize并不会触发，导致了部分内容被遮挡。

所以这种问题就应该通过纯css来解决，现页面结构是这样的：

<html>
<body>

        <div>上方标题栏</div>

        <div>主内容</div>

        <div>底部导航栏</div>

<body>
</html>

1.在body上增加flex，方向column，并且html/body高度设为100%。

2.中间主内容div加上flex: 1 0 auto;自由撑起页面高度。

关注