css位置属性和动态高度

我想在一个容器中实现3个div，就像表行一样

顶部{height=100px}/中部{height=dynamic}/底部{height=100px}

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

• 以下是我迄今为止所做的工作：

HTML

---

只需将顶部和底部边距放在中间部分，在包装内添加一个位置为：相对、顶部和底部的包装，位置为：绝对，高度等于您的边距。

如果顶部和底部

s是静态高度，然后您可以将中间的

设置为0,0，高度为100%，顶部的边距与顶部的高度相匹配

，底部的边距与底部的高度相匹配

这对我来说很有用

#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;
}

记住绝对定位会将元素从页面的正常流程中移除。按照你的方式，所有元素都处于绝对位置。因此，他们没有在页面中保持自己的位置。因此，以下元素基本上被放置在顶部。如果位置是相对的，元素的位置将保留在页面上，下一个元素将被放置在后面

希望这是有意义的。
在我看来（我可能已经理解了你想要的错误）。从css中去掉内部div的定位元素（绝对、顶部、左侧、底部），无论中间div有多大，都可以保持它看起来正确。你需要对这些内部元素进行绝对定位还有其他原因吗？
我有点搞不懂你想做什么。你能更详细地解释一下或者举个例子吗？谢谢你，答案是肯定的，我使用AdobePhotoshop的切片功能已经很长时间了，正如你所知道的，这就是ps处理所有div的方式（据我所知）
#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;
}

#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;
}