css - 使用 height: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 演示

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

Answer 2

用 div 包装你的两个 div（#menu 和 #wrapper），然后应用固定到该 div 的位置，现在应用相对于两个 div（#menu 和 #wrapper）的位置

Answer 3

只需使用底部：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;
}

小提琴

Answer 4

你无法解决这个问题，

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

由于您给出了位置：固定，它与任何容器无关，仅与视口有关，因此顶部：50px 具有 100% 高度，将始终不在屏幕上。

改变其中任何一个，你可以这样做，比如在“%”中给出高度和顶部

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

还

 #menu {
   height:10%
}