使用固定导航滚动内容

Question

我被困在这里了。我不能完全弄清楚正确的语法来让我的网站布局完全正确。

我试图有一个固定宽度为 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

如果还有什么我可以提供的，请告诉我。我已经用尽了所有的想法。

Answer 1

你几乎让它工作了。只需要删除侧边栏上的浮动（它是绝对定位的，所以不需要它），然后将其位置从顶部偏移顶部导航的高度。就这样……

.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/