为什么绝对定位的元素脱离了文档流,还能撑出滚动条

新手上路,请多包涵
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<style>
    .abs-par {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
    }
    .abs-son {
        position: absolute;
        right: 0;
        top: 0;
        width: 200px;
        height: 1000px;
        border: 3px solid gold;
    }
</style>
<body>
<div class="abs-par">
    <div>
        <div class="abs-son"></div>
    </div>
</div>
</body>
</html>

父元素显示的高度已经是零了,为什么还能撑出滚动条。
问题一:可以实现父元素高度被子元素撑开吗?
问题二:浏览器这种被绝对定位的元素撑出现滚动条的效果怎么实现的?

阅读 6.2k
3 个回答

滚动一般来说可以表示为窗口滚动window,全局文档滚动documentElement,局部元素滚动Element。
你虽然脱离了文档流,但是你还在窗口内啊,还是会引起滚动。

还有,个人觉得文档流是解释盒子模型元素布局排列的,跟滚动其实没有强关联关系。

虽然概念上讲脱离文档流脱离文档流,但实际上,并不是说他就不在浏览器里了,他在,只是位置嘛,看你怎么写。

简单来说,可以理解成用一个全景模式拍清明上河图,absolute元素相当于在画上贴贴纸。

你用一个375x812的屏幕去看一个实际长度6000x812的图,可不得拉镜头嘛。

现在你说,哎呀我想在桥那里再贴个电视机,电视机的右上角再贴个超大的邓伦
浏览器说,行,你要贴多大的贴纸?
你说,电视机高么100%,宽嘛,随便啦,邓伦要贴个大的,1000x200好啦。
浏览器心想,咿呀嘿那我咋知道你要多大的电视机啊,算了,做个标记吧。

然后浏览器顺手把邓伦贴在了标记的右上角。

这时候你还是在拍,拍到邓伦贴纸了,但是你取景框就只有375啊,所以你看不全邓伦,只能再往右边拉才能把邓伦看全

虽然元素脱离了文档流,但是它仍然在页面中,也是实实在在具有高度和宽度的元素,元素高度超出浏览器窗口的高度就会有滚动条。

想让父元素高度被子元素撑开,那就不要使用绝对定位,普普通通就好啦

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题