CSS div позиционирование - PullRequest
Новая
       16

CSS div позиционирование

0 голосов
/ 08 февраля 2010

У меня есть div, в котором есть 2 div. Один из дочерних элементов имеет статическую высоту 2em, и я хочу, чтобы другой вертикально заполнил оставшееся пространство родительского элемента. Как мне это сделать?

Редактировать: мне нужен родительский div для заполнения экрана.

Ответы [ 2 ]

1 голос
/ 08 февраля 2010

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

Предполагая, что: 

<div id="parent">
  <div id="top"></div>
  <div id="bottom"></div>
</div>

использование: 

#top { height: 2em; }

и нижний div будет настолько большим, насколько это необходимо. Вы можете сделать нижнюю фиксированную высоту и достичь того же.

Но я подозреваю, что вы хотите сделать, чтобы внешний div фиксированной высоты (скажем, 100%). Это становится намного сложнее. Проблема в том, что в CSS нет способа сказать «высота 100% минус 2em» без использования (неуместного) CSS-выражения.

Один из подходов - наложить верх на нижний. 

#outer { position: relative; }
#top { position: absolute; height: 2em; top: 0; left: 0; width: 100%; }
#bottm { height: 100%; padding-top: 2em; }

Верхний div фактически перекрывает нижний. Это хорошо, если вы не хотите границы.

0 голосов
/ 08 февраля 2010

Вы можете использовать Faux Columns, если вы используете изображение для фона, или просто переместите цвет фона обратно на #parent, чтобы создать видимость заполнения экрана #bottom div. Он заполнил бы страницу, задав ей 100% высоты (при условии, что html и body также получат высоту: 100%).

Пример: 

<head>
    <title>TITLE</title>
    <style type="text/css">
        html, body { height: 100%; margin: 0; padding: 0; }
        #parent { height: 100%;  background: #f08; }
        #top { height: 2em; background: #80f; }
    </style>
</head>
<body>
<div id="parent">
    <div id="top">TOP DIV</div>
    <div id="bottom">THE REST</div>
</div>

Поскольку CSS - это почти стиль, создание 100% высоты - это то же самое, что 100% высоты. Правильно?

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

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

...