如何在瀏覽器位於固定div上方時使瀏覽器達到全高？

Question

我有3個div。首先是100％寬度和100px高度。第二個是100％寬，但我想使它成爲瀏覽器的高度。第三個是100％寬和100px高，但這第三個div固定在屏幕的底部。

這裏是我的嘗試並不能使中間格填寫之間的空間的頂部和底部div的

.top, .bottom{ 
    background-color: grey; 
    width: 100%; 
    height: 100px; 
} 

.bottom{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
} 

.middle{ 
    background-color: white; 
    width: 100%; 
    height: 100%; 
    border: 1px solid red; 
} 

這裏是什麼，我試圖JsFiddle

我如何獲得的jsfiddle中間div要擴大以填充上下div之間的空間？

Answer 1

有很多方法可以做到這一點。

一個簡單的（雖然你必須檢查瀏覽器兼容性）是使用calc()。然後，你不需要使用底部DIV固定位置：

Updated JsFiddle

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

.top, .bottom{ 
    background-color: grey; 
    width: 100%; 
    height: 100px; 
} 

.middle{ 
    background-color: white; 
    width: 100%; 
    height: calc(100% - 200px); 
    outline: 1px solid red; 
} 

Answer 2

如果這是你的字面上唯一的要求，你也許可以逃脫

.middle { 
    height: calc(100vh - 200px); 
} 

但是，如果你想利用這一切更進了一步，可能是明智的，看看Flexbox的。這頁有一些很好的信息http://css-tricks.com/snippets/css/a-guide-to-flexbox/。

Answer 3

首先，您需要通過將html和body設置爲100％的高度來修復整個頁面的高度。 然後，你需要一個底邊距添加到您的.middle div來考慮下一個高度：

html, body { 
 
    height: 100%; 
 
} 
 

 
.top, .bottom { 
 
    background-color: grey; 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 

 
.bottom { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
.middle { 
 
    background-color: white; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid red; 
 
    margin-bottom: 100px; 
 
}

<div class="top"></div> 
 
<div class="middle">some text</div> 
 
<div class="bottom"></div>

Answer 4

嘗試使用視口的高度。

height: 100vh; 

做不到這一點，我會考慮使用Flex：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

它的設計，做你正在嘗試做的。

Answer 5

如果你可以使用Flex和VH這將工作。

body { 
    display: flex; 
    flex-direction:column; 
} 
.top, .bottom{ 
    background-color: grey; 
    flex: 1 1 100px; 
} 
.middle{ 
    background-color: white; 
    border: 1px solid red; 
    flex: 1 1 100vh; 
}