位置絕對沒有高度

Question

我有一個相當簡單的問題，我認爲這是常見的問題，但我無法在這裏找到一個解決方案在stackoverflow。

我有一個3格的和中間的是絕對定位，所以最後的div浮動ontop。我怎樣才能讓最後的div尊重第二的內容。我不能使用固定的高度，因爲如果瀏覽器被調整大小，這將不起作用。

.box1{ 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: green; 
 
    margin: 10px auto; 
 
} 
 

 
.box2{ 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: blue; 
 
    margin: 10px auto; 
 
    left: 0px; 
 
    right: 0px; 
 
    position: absolute; 
 
} 
 

 
.box3{ 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: green; 
 
    margin: 10px auto; 
 
}

<div class="wrapper"> 
 
    <div class="box1"></div> 
 
    <div class="box2"></div> 
 
    <div class="box3"></div> 
 
</div>

https://jsfiddle.net/vuyrbbpf/

我想它這麼DIV3尊重有內容，其中DIV2到位，而不是浮動ontop的它

Answer 1

UPDATE

的正如@leandro指出的那樣，空間是頁腳和底部的內容是空白的。通過指定頁腳position: fixed

---

UPDATE

固定它在新的信息，我已經做出了基於Flexbox的佈局，看起來是在相同的性質this image。我冒昧地更改底部框，box3作爲頁腳，中間box2作爲垂直滾動的內容框，而標題box1和頁腳box3分別是position:fixed和absolute。在.wrapperdisplay: flex

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 100vh; 
 
    min-width: 100vw; 
 
    position: relative; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
.wrapper { 
 
    min-width: 100vw; 
 
    min-height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: nowrap; 
 
    align-items: flex-start; 
 
    align-content: space-around; 
 
    overflow: hidden; 
 
} 
 
.box1 { 
 
    width: 100%; 
 
    min-height: 40px; 
 
    background-color: red; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
} 
 
.box2 { 
 
    width: 100%; 
 
    min-height: 100vh; 
 
    height: 100%; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 40px; 
 
    background-color: blue; 
 
    padding-bottom: 80px; 
 
} 
 
.box3 { 
 
    width: 100%; 
 
    min-height: 40px; 
 
    margin-top: 40px; 
 
    background-color: green; 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
}

<div clas="wrapper"> 
 
    <div class="box1">BOX1 HEADER</div> 
 
    <div class="box2"> 
 
    <h1>START of CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>CONTENT</h1> 
 
    <h1>END of CONTENT</h1> 
 
    </div> 
 
    <div class="box3">BOX3 FOOTER?</div> 
 
</div>

• 使用Flexbox的...
• ...在垂直方向上是flex-direction: column ...
• ...安排flex- （20x20px的盒子），它們之間有均勻間隔的區域align-items: space-between

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: space-between; 
 
    } 
 

 
.box1{ 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: red; 
 
    margin: 10px auto; 
 
} 
 
.box2{ 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: blue; 
 
    margin: 10px auto; 
 
} 
 
.box3{ 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: green; 
 
    margin: 10px auto; 
 
}

<div class="wrapper"> 
 
    <div class="box1"></div> 
 
    <div class="box2"></div> 
 
    <div class="box3"></div> 
 
</div>