前端常见经典布局一：粘连布局

最新推荐文章于 2023-05-02 21:00:00 发布

代码搬运媛

最新推荐文章于 2023-05-02 21:00:00 发布

阅读量678

点赞数

分类专栏： html + css 专栏文章标签： html css

本文链接：https://blog.csdn.net/sinat_33255495/article/details/110388218

版权

html + css 专栏专栏收录该内容

19 篇文章 0 订阅

订阅专栏

什么是粘连布局（css sticky footer）

当main的高度足够长的时候，紧跟在后面的元素

粘连布局的布局方法

粘连布局由三个组成部分：wrap容器,main内容,footer脚部

<div id="main">
    <div class="main">
          main<br>
          main<br>
          main<br>
          main<br>
          main<br>
          main<br>
      </div>
  </div>
  <div id="footer">
      footer
  </div>

具体实现思路：
1、当内容区小于 main 时，保证 main 的最低高度为视窗高度，此处请注意如果要保证等于视窗高度需要从html,body一层层继承高度100%。同时为了保证底部时刻保持在最底部，需要给 footer 设置 margin-top = 底部的高度。
2、当内容区大于 main 时，为了避免 main 与 footer 重合，可以给包含的 main 设置 padding-bottom 为底部的高度。具体样式代码如下：

      *{
                margin: 0;
                padding: 0;         
            }
            html,body{
                height: 100%;
            }
            #main{
            min-height: 100%;  
            }
            .main{
                padding-bottom: 100px;
            }
            #footer{
                height: 100px;
                background: pink;
                margin-top: -100px;
            }

完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            *{
                margin: 0;
                padding: 0;         
            }
            html,body{
                height: 100%;
            }
            #main{
            min-height: 100%;  
            }
            .main{
                padding-bottom: 100px;
            }
            #footer{
                height: 100px;
                background: pink;
                margin-top: -100px;
            }
    </style>
</head>
<body>
    <div id="main">
        <div class="main">
            main<br>
            main<br>
            main<br>
            main<br>
            main<br>
            main<br>
        </div>
    </div>
    <div id="footer">
        footer
    </div>
</body>
</html>

代码搬运媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端常见经典布局一：粘连布局

什么是粘连布局（css sticky footer）当main的高度足够长的时候，紧跟在后面的元素会跟在其后面;示例如下：当元素比较短的时候（比如小于屏幕的高度），我们期望这个元素能够“粘连”在屏幕的底部。示例如下：这种情况我们称为粘连布局。粘连布局的布局方法粘连布局由三个组成部分：wrap容器,main内容,footer脚部<div id="main"> <div class="main"> main<br>
复制链接

扫一扫