css - 如何在绝对位置和相对位置之间对齐 div

Question

我有 3 个 div。第一个 div 在顶部，位置相对，第二个 div 在底部，它的位置是绝对的。还有第三个 div，我希望它位于中间。我希望第三个 div 位于中间，这样无论我更改浏览器的高度，我都希望它与 20px 填充对齐，具体取决于第一个和第二个。

middle-box{
padding: 20px;
}

.top-box{
width: 265px;
position: relative;
margin: 0px auto;
}

.bottom-box{
width: 25%;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
min-width: 300px;
}

Answer 1

关于同一问题的变体已在 SO 上被问过数十次。您想要 20px 边距这一事实无关紧要。整体结构可能很棘手。

我认为这符合您的要求。您可能必须做出的一个妥协是在页眉和页脚上设置固定高度。

http://jsfiddle.net/Fd6f9/1

.top-box {
    height: 60px;
    position: relative;
}
.middle-box {
    position: absolute;
    top: 70px;
    bottom: 80px;
    left: 20px;
    right: 20px;
    margin: 20px 0;
}
.bottom-box {
    height: 56px;
    padding: 12px 0 12px;
    position: absolute;
    bottom: 0px;
}