使用固定导航滚动内容

我卡在这里。我无法完全弄清楚正确的语法，以便让我的网站布局完全正确。使用固定导航滚动内容

我试图有一个100％高度的固定宽度的侧面导航，然后是100％宽度的固定高度的顶部导航，最后我希望我的内容占据剩余空间并具有独立滚动。

我遇到的问题是内容滚动条被topNav栏重叠。

目前，我有我的CSS设置如下：

body 
{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

.sideNav 
{ 
    width: 100px; 
    height: 100%; 
    float: right; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: green; 
    z-index: 3; 
} 

.topNav 
{ 
    width: 100%; 
    height: 65px; 
    background-color: gold; 
    float: right; 
    position: relative; 
    z-index: 2; 
    text-align: right; 
} 
.content 
{ 
width: 100%; 
height: 100%; 
z-index: 1; 
background-color: blue; 
overflow-y: scroll; 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
position: absolute; 
bottom: 0; 
right: 0; 
padding-left: 100px; 
border: 2px red inset; 
margin-top: 65px; 
}

这里是小提琴，因为我知道这听起来有点混乱：jsFiddle

让我知道如果有什么事我可以提供。我用尽了所有的想法。

来源

2013-08-23 Barry Tormey

我看你的描述上的jsfiddle什么，只是改变结果窗口的大小 –

您应该考虑使用网格系统，或者至少激励自己从它，这里是一个代码示例https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L774-L1395 –

@JonathandeM。我不确定你的意思是通过改变结果窗口的大小。我遇到的问题是覆盖内容中滚动条的顶部导航栏的重叠。网格系统也不能解决这个问题。 –

你几乎有它的工作。只需要移除边栏上的浮动（它完全被定位，所以不需要），然后从顶部导航顶部的高度偏移它的位置。是这样的...

.sideNav 
{ 
    width: 100px; 
    height: 100%; 
    /*float: right; - not needed */ 
    position: absolute; 
    top: 65px; /* offset by the height of the top nav bar */ 
    left: 0; 
    background-color: green; 
    z-index: 3; 
} 
.content 
{ 
width: 100%; 
height: 100%; 
z-index: 1; 
background-color: blue; 
overflow-y: scroll; 
box-sizing: border-box; 
-moz-box-sizing: border-box; 
position: absolute; 
/* bottom: 0; - position from top instead for consistency */ 
top: 65px; 
right: 0; 
padding-left: 100px; 
border: 2px red inset; 
/* margin-top: 65px; - no longer needed */ 
}

这里是更新后的小提琴http://jsfiddle.net/7cRL3/

来源

2013-08-23 01:53:34 monners

对不起，我想我不清楚。我遇到的问题是在内容部分的滚动条被topNav –

重叠我已经添加到我的回答 – monners

正确的，但现在滚动条的底部被切断，由于div从顶部65px 。看到我的问题？我能想到的唯一方法是在css高度使用'calc'函数。 –

使用固定导航滚动内容

回答

相关问题