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/

使用固定导航滚动内容

1 个答案: