Исправлена ​​левая навигация + оставшееся место

Question

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

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

Я не могу найти решение самостоятельно, кто-нибудь может мне помочь? Большое спасибо!:)

JSFIDDLE: http://jsfiddle.net/ALGpP/4/

nav {
    height: 100%;
    width: 300px;
    position: fixed;
    z-index:99;
}

#wrapper {
    overflow: hidden;
    position: absolute;
    width: 100%;
    margin-left:300px;
}

Answer 1

Вы имеете в виду что-то подобное?

Я дал #wrapper элемент некоторые новые свойства CSS:

  height: 1200px;
  background-color: red;

• height: 1200px в данном случае только для тестирования, чтобы сделать страницу длиннее.
• background-color: red также только для тестирования, чтобы сделать его более заметным.

Ваш nav Элемент я дал следующие свойства CSS:

  height: 100%;
  width: 20%;
  position: fixed;
  background-color: green;

• height: 100% используется, чтобы элемент заполнял страницу по высоте
• width: 20% используется, чтобы сделать это 20% ширина.
• position: fixedэто заставить элемент придерживаться определенной точки на странице.
• background-color используется для тестирования, чтобы вы могли лучше видеть, что вы делаете.

---

Кроме того, я рекомендую использовать сброс CSS. Это действительно простая вещь, которую я использую в скрипке:

* {
    margin: 0;
    padding: 0;
}

Он в основном выбирает все элементы и дает ему margin а также padding из 0,

---

Если вы хотите nav элемент быть 300px Широкий, используйте эту скрипку.

---

Исправлено содержание, которое не показывалось

Добавьте следующие свойства к вашему #wrapper элемент:

width: calc(100% - 300px);
float: right;

Так это выглядит так:

#wrapper {
    width: calc(100% - 300px);
    height: 1200px;
    background-color: red;
    float: right;
}

Демо здесь