第二內容的div填充剩下的高度，其中，第一內容的div有不同的高度

Question

我已經使用不同的頁面這個網站的頁面結構：

<div class="conteiner"> 
    <div class="header">green</div> 
    <div class="fit_on_content">red<br />red</div> 
    <div class="fit_all">aqua</div> 
    <div class="footer">yellow</div> 
</div> 

這個CSS

.conteiner { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: aquamarine; 
} 
.header { 
    position: relative; 
    top: 0; 
    height: 50px; 
    width: 100%; 
    background-color: green; 
} 
.fit_on_content { 
    position: relative; 
    display: table; 
    margin: 0 auto; 
    background-color: red; 
} 
.fit_all { 
    background-color: aqua; 
    ???? 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 50px; 
    background-color: yellow; 
} 

.header位於屏幕的最佳。
.footer位於底部。
.fit_on_content位於標題下，其內容高度可能會因頁面而異。
.fit_all位於fit_on_content之下並且必須延伸到頁腳。

有什麼想法嗎？

感謝

Answer 1

下面是使用display: table

html, 
 
body { height: 100%; margin: 0 } 
 

 
.container { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.page-row { 
 
    display: table-row; 
 
    height: 1px; 
 
} 
 
.page-row-expanded { 
 
    height: 100%; 
 
} 
 

 
header { 
 
    background-color: #bbb; 
 
    height: 50px; 
 
} 
 
main { 
 
    background-color: #ddd; 
 
} 
 
main ~ main { 
 
    background-color: #fff; 
 
} 
 
footer { 
 
    background-color: #bbb; 
 
    height: 50px; 
 
}

<div class="container"> 
 
    <header class="page-row"> 
 
     Header 
 
    </header> 
 
    
 
    <main class="page-row"> 
 
     First content goes here 
 
    </main> 
 
    
 
    <main class="page-row page-row-expanded"> 
 
     Second content goes here 
 
    </main> 
 
    
 
    <footer class="page-row"> 
 
     Copyright, blah blah blah 
 
    </footer> 
 
</div>

更新所要求的方式，使用display: flex;

不過請注意，您需要添加前綴屬性對於那些瀏覽器來說不支持flex前綴。

html, 
 
body { height: 100%; margin: 0 } 
 

 
.container { 
 
    display: flex; 
 
    flex-flow: column; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.page-row { 
 
    flex: 0 0 auto; 
 
} 
 
.page-row-expanded { 
 
    flex: 1 0 auto; 
 
    height: 0; 
 
} 
 

 
header { 
 
    background-color: #bbb; 
 
    height: 50px; 
 
} 
 
main { 
 
    background-color: #ddd; 
 
} 
 
main ~ main { 
 
    background-color: #fff; 
 
} 
 
footer { 
 
    background-color: #bbb; 
 
    height: 50px; 
 
}

<div class="container"> 
 
    <header class="page-row"> 
 
     Header 
 
    </header> 
 
    
 
    <main class="page-row"> 
 
     First content goes here 
 
    </main> 
 
    
 
    <main class="page-row page-row-expanded"> 
 
     Second content goes here 
 
    </main> 
 
    
 
    <footer class="page-row"> 
 
     Copyright, blah blah blah 
 
    </footer> 
 
</div>