【css】完美解决页脚自适应布局

最新推荐文章于 2024-08-29 01:41:42 发布

Point酱

最新推荐文章于 2024-08-29 01:41:42 发布

阅读量478

点赞数

分类专栏：前端文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_40571965/article/details/128867590

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

当页面内容不足时，页脚始终在最底。

页面内容内容超出的时候，页脚跟随页面滚动，变成正常的流体布局。

可拷贝下面的代码体验


<!DOCTYPE  html>
<html>
<head>
<style type="text/css">
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.content {
    min-height: 100%;
    background: rgb(107, 238, 255);
    overflow: hidden;
}
.main {
    padding-bottom: 50px;
}
.footer {
    height: 50px;
    line-height: 50px;
    background: rgb(15, 112, 202);
    margin-top: -50px;
}
</style>
</head>
<body>
    <div class="content">
      <div class="main">
        很多网站设计一般是两个部分，content + footer，content里面装的是网站主体内容，footer里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现下面两种情况：

        1.内容较少时，这个footer固定在在页面的底部

        2.内容较长时，footer跟在内容后面滑动
      </div>
    </div>


    <div class="footer">
        footer
    </div>
</body>
<html>