CSS-粘连布局-实现以及变形实战

妖狐艹你老母 2022-11-17 13:46 145阅读 0赞

### 文章目录 ###

*  一、粘连布局
 *  二、简单实现
 *  三、实战-简化DOM结构
 *   *  注意要点

# 一、粘连布局 #

**特点**：

*  有一块内容`<main>`，当`<main>`的高康足够长的时候，紧跟在`<main>`后面的元素`<footer>`会跟在`<main>`元素的后面滚动。
 *  当`<main>`元素比较短的时候(比如小于屏幕的高度),我们期望这个`<footer>`元素能够“粘连”在屏幕的底部

如图：图片来源[https://blog.csdn.net/VhWfR2u02Q/article/details/84076421][https_blog.csdn.net_VhWfR2u02Q_article_details_84076421]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 1]

# 二、简单实现 #

DOM结构：

<body>
        <div class="wrap">
            <div class="main">
                <div class="content">content</div>
            </div>
        </div>
        <div class="footer">footer</div>
    </body>

样式：

*  footer必须是一个独立的结构，与wrap没有任何嵌套关系
 *  wrap区域的高度通过设置min-height，变为视口高度
 *  footer要使用margin为负来确定自己的位置
 *  在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

看看效果：

内容不多时，footer固定在底部  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 2]  
内容多的时候，footer跟随在后面滚动：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 3]

# 三、实战-简化DOM结构 #

上面是信息列表，下面是确认按钮。之前的按钮是用的绝对定位，我需要把它改为粘连布局的。列表不长时，按钮固定在底部，列表信息比较多的时候，按钮跟随在后面滚动。  
DOM节点是这样的：

那我要用粘连布局，还得在main的外面需要包一层wrap，这显得有点冗余，我不想多嵌套这一层，  
所以一阵探索后，得出一个方案。

**demo：**

DOM结构如下：

<div class="main">
    	<div class="content">content</div>
    </div>
    <div class="footer">footer</div>

样式如下：

## 注意要点 ##

1.  main需要加上：`box-sizing: border-box;`  
    计算高度的时候会把padding计算进去(涉及盒模型相关知识)
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 4]  
    设置`box-sizing: border-box;`，怪异盒模型，`height = contnet.height+padding+border`  
    这里height100%=667px= contnet.height+padding+border，刚好占满屏幕
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 5]  
    设置`box-sizing: content-box;`，标准盒模型，`height = contnet.height`  
    这里height100%=667px= contnet.height,已经100%占满屏幕，  
    再加上padding-bottom: 100px = 767，就超出屏幕了，会把footer挤到屏幕外面去了，无法正常显示。
2.  当时遇到个问题,如果body上我是设置的`min-height: 100%;`，那么我main上设置的`min-height: 100%;`不会生效
    
    原因：  
    父元素设置了 min-height但没有设置 height时候，子元素的height 和 min-height 不会生效，子元素的 height 或是 min-height 是否生效，基于父元素是否设置了固定高度或者是一个有效百分比高度。

[本文链接https://blog.csdn.net/qq\_39903567/article/details/115556127][https_blog.csdn.net_qq_39903567_article_details_115556127]

[https_blog.csdn.net_VhWfR2u02Q_article_details_84076421]: https://blog.csdn.net/VhWfR2u02Q/article/details/84076421
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]: /images/20221022/04cc3905366f43fd872b47f1b86bb099.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 1]: /images/20221022/8d20fd5676084356b783e3e1e2c99177.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 2]: /images/20221022/f45370f5b90242988fcc401b4c0d8b6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 3]: /images/20221022/3eee991696c24f6a9d4ea72cca887678.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 4]: /images/20221022/0dc220e5cd444f2aa958a8a48dc1c0f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 5]: /images/20221022/d2b466638a5b4483919c3e39cf008b18.png
[https_blog.csdn.net_qq_39903567_article_details_115556127]: https://blog.csdn.net/qq_39903567/article/details/115556127