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

一、粘连布局

特点：

• 有一块内容

  ，当

  的高康足够长的时候，紧跟在

  后面的元素

  会跟在

  元素的后面滚动。

• 当

  元素比较短的时候(比如小于屏幕的高度),我们期望这个

  元素能够“粘连”在屏幕的底部

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

二、简单实现

DOM结构：

    

        

            
content
        
    
    
footer

样式：

• footer必须是一个独立的结构，与wrap没有任何嵌套关系

• wrap区域的高度通过设置min-height，变为视口高度

• footer要使用margin为负来确定自己的位置

• 在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

看看效果：

内容不多时，footer固定在底部

内容多的时候，footer跟随在后面滚动：

三、实战-简化DOM结构

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

	
info
	
info
	
info
	
info

确认

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

demo：

DOM结构如下：

	
content

footer

样式如下：

注意要点

1. main需要加上：box-sizing: border-box;
   计算高度的时候会把padding计算进去(涉及盒模型相关知识)

   
   设置box-sizing: border-box;，怪异盒模型，height = contnet.height+padding+border
   这里height100%=667px= contnet.height+padding+border，刚好占满屏幕

   
   设置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