高度设置为自动时的 div 定位

Question

我在编写 html 代码时遇到了一个场景.. 在一些浮动 div 之间...有两个绝对定位的 div.. 我创建了一个示例 jsfiddle 来显示问题.. 尝试输入一个长文本，如 for示例“CSS 溢出以绝对位置隐藏·我如何防止...溢出的大小：隐藏的 div 位置：内部绝对一个·CSS / HTML ...”..然后单击提交按钮...它将被附加在mainContainer ...因为文本太长并且该容器div设置为auto..它将扩展并移到文本框容器div后面..无论如何我都会根据需要的高度使文本框容器向下移动让主容器获得可见区域，然后在不需要时向上移动..由于一个因素，我使用绝对定位..当我在 css 中添加 width:100% 时..该 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

问题在于使用位置：绝对。如果您从两个 div 元素中删除它并允许它们成为块级元素，它将允许所有内容按您的预期呈现。如果您需要绝对定位它们，我建议创建一个相对位置的父元素，这样它就不会出现在页面上其他 div 的后面。

您可以像其他答案指定的那样计算高度，但我认为如果可能的话，最好将其留给浏览器。

Answer 2

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

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

这会将底部容器向下移动到正确的高度。这是working solution的链接。