CSS 100% - 200px?

Question

Я пытаюсь использовать <div> объекты и CSS для эмуляции внешнего вида фреймов для проекта, над которым я работаю.Используя следующий код, я смог правильно растянуть список слева с помощью border-right, padding и (если я выберу) background, используя только один дополнительный элемент:

HTML:

<div id="sidebar">
    <div id="sidebar-content">
        <!-- content goes here -->
    </div>
</div>
<div id="content">
    <!-- more content -->
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#sidebar {
    float: left;
    height: 100%;
    width: 200px;
    overflow: auto;
    border-right: solid 1px #000;
}

#sidebar-content {
    margin: 10px;
    padding: 0;
    list-style: none;
}

#content {
    position: relative;
    float: left;
    padding: 10px;
}

Это работало хорошо, пока я не попытался добавить еще один элемент в верхней части содержимого, которое растянулось горизонтально.Вот текущий код:

HTML:

<div id="content">
    <div id="criteria">
        <!-- select boxes -->
    </div>
    <!-- other content -->
</div>

CSS:

#criteria {
    position: absolute;
    left: 0;
    right: 0;
    background: #FF9;
}

На этом рисунке показаны результаты

Я попытался добавить следующее правило:

#content {
    width: 100%;
}

, хотя это растянуло #content div до ширины элемента body, а не тела минус боковая панель - поэтому содержимое появилось ниже сгиба (и под боковой панелью слева)

Как я могу использовать CSS, чтобы растянуть поле критериев для горизонтального заполнения области содержимого?

РЕДАКТИРОВАТЬ -

Я хотел загрузитькартина того, что произошло после рекомендации Карла:

Удалите float: left из #content.Если рядом с обычным блочным элементом есть плавающий элемент, блочный элемент заполнит оставшееся пространство.Также не устанавливайте атрибут ширины.

Вот что произошло, когда float: left было удалено

Закрыть, однако теперь #criteriaрастягивается, чтобы прикрыть боковую панель.Другие предложения?

Answer 1

Удалить float: left из #content. Если рядом с обычным блочным элементом есть плавающий элемент, блочный элемент заполнит оставшееся пространство. Также не устанавливайте атрибут ширины.

---

Edit:

Чтобы решить проблему с #criteria, который абсолютно позиционирует себя влево, вы можете добавить левое поле к #content, чтобы учесть ширину боковой панели, как обнаружил Стивен.

Как случайный sidenote, это также позволит вам выровнять содержимое в случае, если боковая панель не будет иметь 100% высоты, как это было в примере Стивена.

Answer 2

Я использовал что-то подобное прежде, чтобы получить макет боковой панели

боковая панель css

ширина: 200 пикселей; Z-индекс: 2; float: left;

содержание css

поле слева: 200 пикселей; z-индекс: 1; ширина: 100%; отступ справа: 2

Вы можете использовать аналогичную технику, чтобы получить заголовок <div>.

Возможно, я не совсем правильно понял css, но идея в том, чтобы использовать комбинацию margin, padding и z-index, чтобы получить эффект, похожий на фрейм.

Answer 3

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