html+css底部自动固定底部

最新推荐文章于 2022-06-22 09:49:21 发布

xiaozhen0610

最新推荐文章于 2022-06-22 09:49:21 发布

阅读量677

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h21cj2cbhk1j.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

前端在切图过程中，肯定遇见过这种情况。

页面结构由三个部分组成，头部、内容、底部。

当一个页面的内容没撑满屏幕时，底部是跟着内容而并列存在的。

这个时候如果是大屏的话，底部下面会有多余的空白区域，而网页设计需求必须要底部贴近浏览器底部。

固定定位，绝度定位都不好使。

废话不多说，直接上代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style>
*{padding:0;margin:0;}
html{height:100%;}
body{min-height:100%;}
body{position:relative;}
.footer{
    height:100px;
    background:red;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
}
.box{
    padding-bottom:130px;
}
.box p{
    line-height:30px;
    text-align:center;
    border:solid 1px green;
}
</style>
</head>
<body>
<div class="box">
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
    <p>离离原上草</p>
</div>
<div class="footer"></div>
</body>
</html>

xiaozhen0610

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+css底部自动固定底部

前端在切图过程中，肯定遇见过这种情况。页面结构由三个部分组成，头部、内容、底部。当一个页面的内容没撑满屏幕时，底部是跟着内容而并列存在的。这个时候如果是大屏的话，底部下面会有多余的空白区域，而网页设计需求必须要底部贴近浏览器底部。固定定位，绝度定位都不好使。废话不多说，直接上代码实现：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>1</
复制链接

扫一扫