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

Question

我在编写 html 代码时有一个场景..在一些 float div 之间...有两个具有绝对定位的 div..我创建了一个示例 jsfiddle 来显示问题..尝试输入一个长文本，例如示例“CSS overflow hidden with absolute position · 我如何防止......溢出的大小:隐藏的 div with position:absolute one inside · CSS/HTML ...”.. 然后点击提交按钮......它将附加在mainContainer ...因为文本太长并且容器 div 设置为 auto..让主容器获得可见区域，然后在不需要时向上移动。由于一个因素，我使用绝对定位。当我在 css 中添加 width:100% 时，div 通常在左边距之间留有间隙和那个 div 的开始...它显示为一个空白区域..请检查 fiddle ..

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 元素中删除它并允许它们成为 block 级元素，它将允许所有内容按您期望的方式呈现。如果您需要绝对定位它们，我建议创建一个父元素，其位置是相对的，这样它就不会出现在页面上其他 div 的后面。

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