Question

我很困惑为什么这一小部分html + css让我的$（文档）.height（）变得很大。似乎溢出容器没有完全正常工作。这是一个显示错误行为的jsbin：http://jsbin.com/omokin/1

<html>
<head>
<style>
#container {overflow:auto;height:500px;width:300px;}
#big {height:90000px;background-color: pink;}
</style>
</head>
<body>
<div id="container">
<div id="big">
</div>
<div style='visibility:hidden; position:absolute;'>x</div>
</div>
</body>
</html>

Answer 1

这是因为你在大div下的容器中放了一个position:absolute的div。你会注意到，在你的例子中向下滚动到页面的底部时，隐藏的带有x的div就在那里。

http://jsbin.com/omokin/6/

如果您略微更改订单，则position:absolute不会推翻整个页面。

<div id="container">
  <div style='visibility:hidden; position:absolute;'>x</div>
<div id="big">
</div>
</div>

换句话说，您不能在使用它的上下文中使用绝对位置。您需要删除绝对定位或将该div移动到大div之上。

Answer 2

$(document).height()会很大，因为你的身高会更长div#big (#big {height:90000px})。

根据.height函数，它占用文档的高度非常大。

您可以查看此documentation

Answer 3

正确#big height:90000px位于#container height:500px，您设置#container overflow:auto。如果您不希望scroll将overflow自动设为hidden

Answer 4

http://jsbin.com/omokin/8/edit

您希望将隐藏元素的top属性设置为0，因为如果您查看top属性正被big元素推送。

Answer 5

尝试在position: relative div上设置#container。如果你不这样做并且你的标记具有你描述的结构，那么绝对定位的div将忽略它自身与其包含块之间的任何溢出属性效果（在这种情况下是根元素，因为没有定位的父节点）。 p>

溢出不起作用 - 文件高度增长

5 个答案: