css 位置属性和动态高度

Question

我想在一个容器内实现3个DIV，就像表格行一样

top {height = 100px} / middle {height = dynamic} / bottom {height = 100px}

现在的问题是使中间 div 的高度动态变化并保持结构正确的最佳方法是什么。

• 这是我到目前为止所做的:http://jsfiddle.net/pvPSD/4/

HTML

<div id="notification">
<div id="n-top">
    top
</div>
<div id="n-middle">
    middle<br /><br /><br /><br /><br />middle
</div>
<div id="n-bottom">
    bottom
</div>
</div>

CSS

#notification {
    position:absolute;
    left:10px;
    top:10px;
    width:175px;
    background: yellow;
}

#n-top {
    position:absolute;
    left:0px;
    top:0px;
    width:175px;
    height:50px;
    background: blue;
}

#n-middle {
    position:absolute;
    left:0px;
    top:14px;
    width:175px;
    background: red;
}

#n-bottom {
    position:absolute;
    display:block;
    left:0px;
    bottom:0px;
    width:175px;
    height:50px;
    background: green;
}

Answer 1

这对我有用

#notification {
    position:absolute;
    left:10px;
    top:10px;
    width:175px;
    background: yellow;
}

#n-top {
    position:relative;
    left:0px;
    top:0px;
    width:175px;
    height:50px;
    background: blue;
}

#n-middle {
    position:relative;
    left:0px;
    width:175px;
    background: red;
}

#n-bottom {
    position:relative;
    display:block;
    left:0px;
    bottom:0px;
    width:175px;
    height:50px;
    background: green;
}

记住绝对定位会从页面的正常流中删除元素。你拥有它的方式将所有元素置于绝对定位中。因此，他们没有保持他们在页面中的位置。因此，以下元素基本上希望放在顶部。有了position relative，元素的位置就保存在页面上了，下一个在寻找位置之后。

希望这是有道理的。