关于设置绝对定位元素的子元素内容超出父元素高度内容不完全可见的坑
大纲
- 演示效果
- 解决方案
- 原理分析
- 总结整理
演示效果
按钮
- 都不设置
- 都设置
- 仅设置bottom
- 仅设置top
解决方案
几种方案
- 设置
overflow : auto - 添加
margin-bottom - 添加
padding-bottom
原理分析
上图灰色部分为li的容器div, 蓝色为fixed遮盖的div·。
左图是效果图，右图的图层拆解图，可以看到对于上述效果，灰色部分可见区域上下都被遮住。
说明：
- 灰色部分：包含长内容的父元素区域，称为父元素
- 绿色部分：长内容区域，称为子元素
- 蓝色部分：上下两个固定的遮盖块
情况1：不设置 top，bottom，overflow
根据图示，内容区（上下）被遮住。
因上下两个遮盖div都设置为fixed，脱离文档流，不占据空间，所以原本的内容会往上移动，导致子元素内容最上部分被遮住。
情况2：仅设置 top: 2rem
根据图示，内容区（下）被遮住。
因设置top:2rem，父元素内容区的最上部与视口保持2rem的距离。因上面的遮盖div高度也为2rem，效果上，上遮盖div的最下面和父元素内容区最上面重合，则子元素的内容（绿色）不会被遮住。
情况3：仅设置 bottom:2rem
根据图示，父元素内容区不被遮住。
但是设置bottom: 2rem，默认显示的内容是相较于子元素内容下半部分的区域 。默认滑块是在滚动条的最上方，若子元素超出父元素下侧边框，则下拉滑块会展示下面的内容。而此时的例子是子元素超出的部分在父元素上侧边框，无法滑动，因而卡住。
情况5：top，bottom，overflow都设置
总结整理
对比父元素设置绝对定位和不设置绝对定位对父元素内容区做调整。
情况1：不设置绝对定位
若父元素不设置（绝对）定位，则设置margin影响内容区的情况
- 无绝对定位，margin-top/bottom都有效
情况2：设置绝对定位
若父元素设置（绝对）定位，则设置margin/top,bottom影响内容区的情况
- 单独设置top有效，只要设置bottom卡住
- 单独设置 margin-top 生效，只要设置bottom卡住。其下 子元素设置 margin-bottom 有效
top，bottom相对于谁？
- 边框，如果有子元素且内容长度大于父元素高度，则也相对子元素的边框。这也是为什么仅设置
bottom内会卡住。默认的滚动条的滑块是位于滚动条的最上方，向下滑动，会显示超出父元素的下边框的内容。而仅设置bottom，超出的内容显示在父元素的上面，而下面没有超出内容，所以没有滑块，滚动条。
根据top，bottom，scroll设置情况不同，得到的对比表格
| top | bottom | 生效 | overflow | 遮住 | 滚动条 |
|---|---|---|---|---|---|
| 不开启 | 不开启 | 无 | 无 | 上下 | 可 |
| 不开启 | 不开启 | 无 | auto | 上下 | 可 |
| 开启 | 不开启 | top生效 | 无 | 下 | 可 |
| 不开启 | 开启 | 卡住 | 无 | - | 不可 |
| 开启 | 开启 | 都生效 | auto | 上下不 | 可 |
总结：
- 如果不让某设置绝对定位的父元素下的长内容子元素的内容被遮住，需要同时设置
top，bottom，overflow。除此之外，只要设置bottom都会卡住，失去滚动条
