如何在使用高度时偏移导航栏下的内容：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% 
}