溢出不起作用-文档高度不断增加
[英]overflow not working — document height growing
问题描述
我很困惑为什么这小部分html + css使我的$（document）.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>
5 个解决方案
解决方案1
3 2013-08-04 02:47:39
这是因为您已将具有position:absolute的div放置在big div下的容器中。 在示例中向下滚动到页面底部时，您会注意到带有x的隐藏div在其中。
如果您稍微更改顺序，那么position:absolute不会将整个页面向下推。
<div id="container">
<div style='visibility:hidden; position:absolute;'>x</div>
<div id="big">
</div>
</div>
换句话说，您不能在所使用的上下文中使用绝对位置。 您需要删除绝对位置或将div移到大div上方。
解决方案2
1 2013-08-04 02:50:07
解决方案3
0 2013-08-04 02:43:44
其正确的#big height:90000px位于#container height:500px并且您设置了#container overflow:auto 。 如果您不希望scroll使overflow自动hidden
解决方案4
0 2013-08-04 02:45:04
http://jsbin.com/omokin/8/edit
您想将隐藏元素的top属性设置为0，因为如果您查看top属性是由big元素推送的。
解决方案5
0
尝试设置position: relative #container div上的position: relative 。 如果您不这样做，并且您的标记具有您所描述的结构，则绝对定位的div将忽略自身与其包含的块之间的任何溢出属性影响（在本例中为root元素，因为没有定位的父对象）。
如果元素溢出，如何防止行大小增长到整页高度？
[英]How to prevent row size growing to full page height if there's an overflow of elements?
过渡高度不适用于具有隐藏的隐藏和固定高度的div
[英]transition height not working on div with overflow hidden and fixed height
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.