如何在使用高度時偏移導航欄下的內容：100％？

Question

考慮下面的代碼：

HTML 菜單

CSS

#menu { 
    position: fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:50px 
} 

#wrapper { 
    position: fixed; 
    top: 50px; 
    width:100%; 
    height:100%;  
    overflow: auto; 
} 

我想包裝坐在固定的資產淨值之下，並滾動的所有內容。效果是滾動條從導航下方開始，而不是在導航欄上方。

但是，由於top:50px偏移，包裝的底部距離屏幕50px。我怎樣才能解決這個問題，仍然有100％的剩餘屏幕地產的高度？

重要：我需要這是IE8兼容

感謝

Answer 1

它會用稍微不同的方式工作：

jsFiddle Demo

#wrapper { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    overflow: auto; 
} 

Answer 2

有一個div然後應用位置固定於該div包裝你的兩個div的（#menu和#wrapper指定），現在應聘的職位相對於兩者的div（#menu和#wrapper指定）

Answer 3

只要使用bottom：0;頂部：50px;

#menu { 
    position: fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:50px; 
    background: blue; 
} 
#content { 
    position: fixed; 
    width:100%; 
    top: 50px; 
    bottom: 0; 
    overflow-y: scroll; 
    background: red; 
} 

Fiddle

Answer 4

你不能修復這個問題，

position:fixed; 
height:100%; 
top:50px; 

，因爲你給定的位置：固定的，它相對於任何容器，只是視口而已，所以頂部是不是：具有100％高度的50像素將始終離開屏幕。

改變任何的這些，你能做到這一點，像給人的高度和頂部 '％'

position:fixed; 
height:90%; 
top:10%; 

也

#menu { 
    height:10% 
}