首页 文章

高度设置为auto时div的定位

提问于
浏览
0

我有一个场景,同时编写一个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%;
}​

2 回答

  • 2

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

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

  • 0

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

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

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

相关问题