Question

我在编写一个html代码时有一个场景..在一些浮动div之间...有两个具有绝对定位的div ..我已经创建了一个示例jsfiddle来显示问题..尝试输入一个长文本，如示例“CSS溢出隐藏绝对位置·如何防止...溢出的大小：隐藏div与位置：绝对一个内部·CSS / HTML ...”..和clickon submite按钮...它将被附加在mainContainer ...因为文本太长而且容器div被设置为auto ..它将扩展并且在文本框容器div后面...无论如何我应该根据所需的高度使文本框容器向下移动为主要容器获取可见区域，然后如果不需要向上移动..我使用绝对定位由于一个因素..当我添加宽度：100％在CSS ...这div通常留下左边距之间的差距并且那个div的开始...它看起来像一个空白..请检查小提琴..

http://jsfiddle.net/EVwSG/5/

HTML 输入

CSS

#mainContainer{
width:50%;
height:auto;
position:absolute;
left:0;
top:20px;
background-color:#000000;
color:#ffffff;
font-size:19px;
}


 #textboxContainer{
position:absolute;
width:100%;
height:100px;
background-color:green;
top:60px;
left:0;
}

#inputBox{
width:80%;
}

Answer 1

问题在于使用position：absolute。如果从两个div元素中删除它并允许它们是块级元素，它将允许按照您的预期渲染所有内容。如果您需要绝对定位这些，我建议创建一个父元素，其位置是相对的，因此它不会出现在页面上的另一个div后面。

您可以像其他答案指定的那样计算身高，但我认为最好在可能的情况下将其留给浏览器。

Answer 2

最简单的解决方案是获取新元素的高度，然后将顶部添加到其中。

$("#textboxContainer").css("top", $("#mainContainer").height() + 20);

这会将底部容器降低到正确的高度。这是working solution的链接。

高度设置为auto时div的定位

2 个答案: