问题

在使用iSroll v4插件时，无法滚动到底部，从源码得知最大滚动位置由maxScrollY决定。从源码摘录出计算maxScrollY的部分

that.wrapperH = that.wrapper.clientHeight || 1;
that.scrollerH = m.round((that.scroller.offsetHeight + that.minScrollY) * that.scale);
that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY;

当scale为1时，可以简单的认为

maxScrollY =  父元素.clientHeight - 子元素.offsetHeight

因为父元素.clientHeight=0，所以可滚动区域减小，无法滑动到底部。那么子元素有高度的情况下，为什么父元素的clientHeight为0呢？

父元素高度塌陷

我们用demo还原这个问题，审查元素可以发现，子元素有高度，h但父元素高度为0，这不科学呀？！

一番尝试后，发现是position:absolute捣的鬼，absolute是绝对定位，它会脱离当前文档流，所以不会撑起父元素。解决办法就是，设置父元素的最小高度，min-height ，通常会设置为

min-height: calc(100% - 其它元素的高度)

absolute
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/position

css position:absolute 父元素高度塌陷相关推荐

css 高度塌陷_css中父元素高度塌陷是什么意思，如何解决？（附代码）
本篇文章给大家带来的内容是关于css中父元素高度塌陷是什么意思,如何解决?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先得回答什么是父元素高度塌陷: 在文档流中,父元素的高度默 ...
CSS float浮动规则以及父元素高度塌陷的解决方法
本文不讲float的所有内容,只浅谈float对不同高度块之间浮动结果的规则以及父元素高度塌陷的解决方法. 首先看一个小问题,就是float会导致父容器的高度塌陷,如下代码: <head> ...
css 子元素设置float,父元素高度塌陷
以div元素为例.div元素的高度会通过内容自动撑开.也就是说,内容有多少,高度就有多高.但是当内部元素设置了float属性之后,会是父元素高度塌陷 <div class="conta ...
65、如何解决浮动引起的父元素高度塌陷
1. 父元素高度塌陷的原因父容器的高度是内部容器撑开的,当子元素元素浮动后,脱离了正常文档流,导致父容器的高度塌陷,高度变为0px. 2.如何清除浮动 1. overflow: hidden; 原理 ...
解决子元素浮动造成父元素高度塌陷的问题学习总结
解决子元素浮动造成父元素高度塌陷的问题的几种方法与BFC原理简释一.解决子元素浮动造成父元素高度塌陷的问题的4种方法 1.直接给父元素设置高度,在子元素改变的情况下,此方法使用起来比较繁杂. 2.给 ...
HTML浮动导致高度塌陷,HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
解决CSS子元素绝对定位致使父元素高度为0
方法: 使用JS 代码: // 解决子元素决定定位父元素高度塌陷 var father = document.querySelector('.father '); var son = document ...
absolute导致的高度塌陷问题——解决方法
前段时间写前端页面排版的时候又又又遇到了absolute导致的父元素高度塌陷的问题,以前代码写的少所以遇到问题就是查查查,问题解决后了一个漫长的学期后又遇到一样的问题又得重新查查查,所以这次索性总结一 ...
html自适应_web前端入门到实战：HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

css position:absolute 父元素高度塌陷

问题

父元素高度塌陷

参考

css position:absolute 父元素高度塌陷相关推荐

最新文章

热门文章