0

I have a scenario while writing an html code.. that inbetween some floating divs... there comes two divs with absolute positioning.. and Ive created a sample jsfiddle to show the issue.. try entering a long text like for example "CSS overflow hidden with absolute position · how do I prevent ... Size of overflow:hidden div with position:absolute one inside · CSS/HTML ...".. and clickon submite button...it will get appended in the mainContainer... since the text is too long and that container div is set to auto..it will extend and go behind the textbox container div.. is there anyway I dould make the textbox container to move down according to the height needed for the main container to get visible area and then move back up if not needed.. im using the absolute positioning due to one factor..as when I add width:100% in css.. that div usually leaves a gap between left margin and the start of that div... and it appears as a blank space.. please check the fiddle..

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

HTML Enter

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%;
}​

​</p>

4

2 回答 2

2

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

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

于 2012-11-01T07:19:39.383 回答
0

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

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

这会将底部容器向下移动到正确的高度。这是工作解决方案的链接。

于 2012-11-01T07:19:40.210 回答