Fiddle

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（＃menu和#wrapper）然后应用固定到该div的位置，现在应用相对于两个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;

因为你给定的位置：固定，它不是相对于任何容器，只是视口，所以top：50px，100％高度，总是在屏幕外。

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

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

也

 #menu {
   height:10%
}

使用高度时如何偏移导航栏下的内容：100％？

4 个答案:

Fiddle