2 деления (заполнение всей страницы) - PullRequest
Новая
       1

2 деления (заполнение всей страницы)

1 голос
/ 18 апреля 2010

У меня есть один горизонтальный div в верхней части моей страницы высотой 50 пикселей.

А теперь я хочу поместить еще один div под ним, который заполнит остальную часть всей страницы (должна работать с любым разрешением).

Кто-нибудь знает, как это сделать только с помощью CSS?

Буду признателен за любую помощь. Спасибо!

Ответы [ 3 ]

1 голос
/ 18 апреля 2010

Хотя это не складывает div, это очень простое решение. Создайте div с высотой 100%, а затем поместите div с высотой 50px. 

<body style="height: 100%; width: 100%;">
    <div style="height: 100%; width: 100%;">
        <div style="height: 50px; width: 100%;">Header</div>
        <!--Rest of Content-->
    </div>
</body>
1 голос
/ 18 апреля 2010

Есть способы сделать это. Вот пример использования абсолютного позиционирования и оболочки. Очевидно, игнорируйте цвета - они просто есть, чтобы вы могли видеть, что происходит. 

<body style="margin: 0;height: 100%; background-color: yellow;">
        <div style="background-color: green; height: 50px">top stuff</div>
        <div style="position: absolute; top: 50px; bottom: 0; left:0; right: 0; background-color: blue">main stuff</div>
</body>
0 голосов
/ 18 апреля 2010

Это пример компоновки, которая несколько проблематична для «чистого» CSS, но тривиальна для таблиц.

Во-первых, нет способа выразить (игнорируя CSS-выражения, которых вы склонны избегать) "остальной части страницы" или "100% минус 50 пикселей", поэтому общее решение этой проблемы:

  1. Создать контейнер, высота которого 100%;

  2. Поместите заголовок на высоту 50px;

  3. Контент просто занимает остальное пространство. Любой стиль применяется к контейнеру, а не к содержимому.

Итак: 

<div id="container">
  <div id="header"></div>
  <div id="content"></div>
</div>

с: 

html, body. #container { height: 100%; }
#container { height: 100%; min-height: 100%; }
#header { height: 50px; }

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...