css - <div> 标签的高度

Question

我的页面中有 2 个 div:<div id="firtdiv" style="top:100px; left:200px; height:unknown"></div> <div style="top:unknow; height:200px" id="seconddiv"></div>

我将 firstdiv 的高度设置为自动，因为我将放置一个数据列表，所以我不知道它的高度。 而 secondiv 的 top 属性会根据 fistdiv 的高度而变化。第二个 div 在 firstdiv 的底部。

我该怎么办？

Answer 1

我建议将两个 DIV 放在一个 DIV 中(设置为绝对)。 '因为当你将两者都设置为绝对时，那么它们就不会相互插入。这是一个例子:

<div id="wrapper">
    <div id="content">
        Content...
    </div>

    <div id="bottom">
        Botom..
    </div>
</div>

对于 CSS:

#wrapper
{
    position:absolute;
    top: 110px;
    left: -400px;
    width:800px;
}

#bottom
{
    border-top: 2px dotted #2259FF;
    font-family: ebrima;
    padding-top: 5px;
    height: 200px;
    margin-left: 50%;
    background-color:green;
}
#content
{
    padding: 0px;
    margin-left: 50%;
    min-height:400px;
    _height:400px;
    background-color:yellow;
}

如您所见，我将您的 2 个 DIV 放在父 DIV(包装器)中。父 DIV 设置为绝对，就像您希望两个 DIV 的定位方式一样。然后两个 DIV 没有定位到绝对位置，以便第一个 DIV 将在其内容增长时插入第二个 div。此外，如果您想保留第一个 DIV 的最小高度，请放置 min-height:400px，但要小心，因为 min-height 有问题Internet Explorer，你可以做些什么让它在 IE 中工作是 _height:400px; 因为 IE 将 height 视为 min-height，IE将考虑 _height(带下划线)但不考虑其他浏览器，因此它不会对其他浏览器产生影响。