CSS让脚部始终在页面底部

最新推荐文章于 2021-12-25 23:38:48 发布

Ling201509

最新推荐文章于 2021-12-25 23:38:48 发布

阅读量1.8k

点赞数

分类专栏： CSS html web技巧文章标签： css

本文链接：https://blog.csdn.net/Ling201509/article/details/51860748

版权

CSS 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

web技巧

1 篇文章 0 订阅

订阅专栏

让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。

方法一：

/*css
----------------------------------------------------------------------------------------------------*/
body,html {
    height: 100%;
    margin: 0;
}
.wrap {
    position: relative;
    min-height: 100%;
}
.main {
    margin-bottom: 30px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: red;
}

/*html
----------------------------------------------------------------------------------------------------*/
<body>
    <div class="wrap">
        <div class="main">
        </div>
        <div class="footer"></div>
    </div>
</body>

将html和body设置为高100%，将wrap相对定位最小高度为100%，footer相对wrap绝对定位到底部。

方法二：

/*css
----------------------------------------------------------------------------------------------------*/
body,html {
    height: 100%;
    margin: 0;
}
.main {
    min-height: 100%;
}
.footer {
    margin-top: -30px;
    height: 30px;
    background-color: red;
}

/*html
----------------------------------------------------------------------------------------------------*/
<body>
    <div class="main">
    </div>
    <div class="footer"></div>
</body>

将html和body设置为高100%，将main的最小高度设置为100%；将footer的margin-top的值设置为负的footer的高度大小。

方法三：

/*css
----------------------------------------------------------------------------------------------------*/
body {
    padding: 30px 0;
    box-sizing: border-box;
}
.main {
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: red;
}

/*html
----------------------------------------------------------------------------------------------------*/
<body>
    <div class="main">
    </div>
    <div class="footer"></div>
</body>

将html和body高度设置为100%，将给body设置下边距为footer的高度并将box-sizing设置为border-box；将footer相对于body绝对定位。

方法四：

/*css
----------------------------------------------------------------------------------------------------*/
body {
    margin:0;
    padding: 0;
}
.wrap { 
    box-sizing: border-box;
    position: relative;
    min-height: 100vh;
    padding-bottom: 200px;
}
.footer {
    position: absolute;
    width: 100%;
    height: 200px;
    bottom: 0;
    background-color: red;
}

/*html
----------------------------------------------------------------------------------------------------*/
<div class="wrap">
    <div class="footer"></div>
</div>

将.wrap最小高度设置为视口高度，padding-bottom设置为footer的高度，将box-sizing设置为border-box。.footer相对.warp绝对定位。【注意！！！此方法也可不添加.wrap，直接用body替换.wrap标签的位置也可。body{…} –> html：< body >< div class=”footer” >< /div >< /body >】 Firefox、Chrome、Safari以及IE8以上支持vh。

Ling201509

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS让脚部始终在页面底部

让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。方法一：/*css----------------------------------------------------------------------------------------------------*/body,html { height: 100%; margin: 0;}.wrap {
复制链接

扫一扫