使用固定位置的100％身高

Question

我正在使用位置：固定;使div適應不同的屏幕尺寸。在這個簡化的例子中，高度被設置爲100％，以使div「example」總是佔據屏幕的整個高度。我想要做的是在這個div上騰出空間，我這樣做是通過使用position: fixed;和top: 100px; bottom: 100px;

問題是代碼只運行top: 100px;不是兩個。有沒有解決這個問題的方法？

Fiddle

HTML

<div id="example"></div> 

的CSS

#example { 
    background-color: #333; 
    width: 500px; 
    height: 100%; 
    position: fixed; 
    bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */ 
    top: 100px; 
} 

編輯

如果我設定的高度使用CSS設置高度爲100％的這一功能istead 。那我該怎麼辦？

​​

Answer 1

你要刪除的高度：100％。瀏覽器將計算頂部和底部值之間的距離並創建所需的高度。

新代碼：

#example { 
    background-color: #333; 
    width: 500px; 
    position: fixed; 
    bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */ 
    top: 100px; 
} 

JSFiddle

Answer 2

編輯：我喜歡RMo的答案更多。它更簡單。這就是說，他們都工作。

爲了澄清，這聽起來像你想要div覆蓋100％的高度，減去100px在頂部和100px在底部。

這樣做的方式相對較新。您需要使用calc價值爲您height屬性：

#example { 
    background-color: #333; 
    width: 500px; 
    height: calc(100% - 200px); 
    position: fixed; 
    top: 100px; 
} 

它在現代瀏覽器廣泛支持：http://caniuse.com/#feat=calc

Answer 3

你似乎誤解盒模型。當你說「高度：100％」時，這意味着元素的高度將與包含佈局的元素具有相同的像素數量。設置頂部：100px將導致框向下移動100px，但不會影響框的高度。因此，100px的框會溢出視口。如果你指定bottom：100px，這是相同的，除了盒子的頂部100px將會使視口下溢。

刪除高度100％，頂部和底部指令將計算元素高度。

#example { 
    background-color: #333; 
    width: 500px; 
    position: fixed; 
    bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */ 
    top: 100px; 
} 

Answer 4

只要試試這個，而不是身高：100％，這就夠了; http://jsfiddle.net/xd2j2shm/1/

height: calc(100% - 200px);