Прокрутка содержимого с фиксированной навигацией

Question

Я застрял здесь. Я не могу полностью понять правильный синтаксис, чтобы получить макет моего сайта в точности.

Я пытаюсь иметь боковую навигацию фиксированной ширины, которая составляет 100% высоты, а затем верхнюю навигацию, фиксированную высоту, которая составляет 100% ширину, и, наконец, я хочу, чтобы мой контент занимал оставшееся пространство и имел независимый прокрутки.

Проблема, с которой я сталкиваюсь, заключается в том, что полоса прокрутки контента перекрывается верхней панелью nav.

Я в настоящее время есть мой 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/