CSS Auto-height Div не позиционируется правильно

Question

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

Я хочу, чтобы вся страница была изменчиваема, поэтому независимо от того, насколько велико или малое окно браузера (в пределах разумного), содержимое будет изменяться на экране пользователя. Все работает и изменяет размеры, но есть одна проблема с navBar. Вот CSS отрывок:

body{ 
    background-color: #111111; 
    font-family: Roboto; 
    color: #cccccc; 
    font-weight: 300; 
    font-size: 14pt; 
    height: 100%; 
} 

#content{ 
    width: 80%; 
    float: left; 
} 

#navBar{ 
    width: 20%; 
    height: 100%; 
    background-color: #00C9FF; 
    float: left; 
    position: absolute; 
} 

#welcome{ 
    background-color: #222222; 
    text-align: center; 
    margin: 1%; 
} 

Проблема:

• Если я оставлю код выше, как есть, NavBar оказывает на правой стороне экрана, как и должно быть, но это не 100% высоты окна браузера. Обратите внимание, что он по-прежнему изменяется, когда изменяется WIDTH окна браузера.
• Если я устанавливаю положение navBar на абсолютное (положение: абсолютное), навигатор отображает точно, как он должен отображаться, кроме того, что он плавает в левой части браузера, в основном делая его на полной противоположной стороне, где он должен быть.

Demo:http://codepen.io/anon/pen/YPyvzO (удалить позицию: абсолютная, чтобы увидеть, где NavBar должны оказывать)

Я пытался несколько различных вещей, включая настройку «HTML» в CSS, чтобы высота: 100% и несколько различных позиций свойства для navbar, все безрезультатно. Я бы хотел, чтобы это делалось только в CSS, но я не уверен, что это возможно.

Answer 1

Добавьте следующее:

position: absolute; 
    right: 0; 

к #navBar. Одна вещь, которая потребовала мне много времени, чтобы понять, что position: absolute переопределяет все, даже плавает.

Answer 2

при изменении размера браузера изменение ширины и высоты, поэтому для этого вам нужно использовать медиа-запрос в CSS, и в этом вы должны сообщить браузеру, что в этой ширине навигационная панель должна быть в заданной ширине. и еще один вариант - вы можете использовать bootstrap, в бутстрапе вы не пишете слишком много css. и вся работа стала легкой.