Как создать простой макет CSS, который расширяется до области просмотра?

Question

Я пытаюсь построить этот очень простой (визуально говоря) макет с использованием HTML / CSS, который вы можете увидеть в приведенной ниже рамке:

/------------------------------------------\
|                                          |
|                header div                |
|                                          |
|------------------------------------------|
|                                       |S |
|                 main div              |C |
|                                       |R |
|                                       |O |
|                                       |L |
|                                       |L |
|                                       |  |
|                                       |B |
|                                       |A |
|                                       |R |
\------------------------------------------/

Он имеет DIV "заголовок" высотой 200 пикселей, который заполняет 100% порта просмотра по горизонтали, а затем под ним находится "основной" DIV, который заполняет 100% оставшегося пустого пространства (по горизонтали и вертикали) с прокруткой, установленной на «auto» для учета любого переполненного контента.

Сложнее всего заставить "основной" DIV заполнить оставшееся пространство без использования JavaScript. когда я не могу использовать процентную высоту и при этом полоса прокрутки остается полностью видимой.

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

Так, как я могу сделать это? Пример тоже был бы великолепен!

Answer 1

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

#head{
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  height: 200px;
}

#body{
  margin: 200px 0 0 0;
  top: 200px; 
}

Answer 2

Я предлагаю вам попробовать хорошо протестированный макет, подобный этому: http://www.cssplay.co.uk/layouts/basics2.html

Там вы можете увидеть, как это делается.

Answer 3

Только что попытался что-то выяснить, и самое близкое решение чистого css, которое я могу найти, - это использовать проценты для обеих высот и установить минимальную высоту заголовка в 200 пикселей. Однако, когда область просмотра не так велика, как ожидалось, нижний div немного выходит за рамки сгиба.

Хорошим решением здесь было бы просмотреть статистику и определить, какая высота экрана наиболее часто используется вашими посетителями, вероятно, около 800 пикселей. Затем установите что-то вроде этого

#head {
      height: 25% (depending on above figure)
      min-height: 200px;
}
#body {
      height: 75%;
}

Это обеспечит идеальную работу вашего дизайна в большинстве случаев.

Хотя, почему кто-то хотел бы держать все выше сгиба в этот день и возраст, я не могу быть честным. Мы все довольно хорошо привыкли к прокрутке, а в современных широкоэкранных моделях прокрутка довольно распространена

Answer 4

дисплей: таблица или же http://www.ironmyers.com/layouts/100_percent_Layouts/

Answer 5

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