Сделать div заполнить пространство - PullRequest
Новая
       10

Сделать div заполнить пространство

0 голосов
/ 03 февраля 2009

Я бы хотел поставить две колонки на стороне содержимого div. У меня проблемы с тем, что я хочу, чтобы колонки были построены из 3 частей. Верхняя и нижняя части должны иметь фиксированную высоту, но средняя будет регулироваться в зависимости от высоты содержимого. Посмотрите на образец с одним столбцом: 

<html><head>
<style>
* { border: 1px solid black;}
#contentWrapper     { width:450px; }
#leftColumn         { width:100px; float: left; }
#leftColumnTop      { width:100px; height:50px; background-color: gray; }
#leftColumnMiddle   { background-color: red; }
#leftColumnBottom   { width: 100px; height:50px; background-color: gray; }
#content            { width: 300px; float: left; }
#footer             { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumn">
    <div id="leftColumnTop"> </div>
    <div id="leftColumnMiddle"> </div>
    <div id="leftColumnBottom"> </div>
</div>
<div id="content">content<br>
here<br>more<br>more<br>more<br>more<br>more<br>more<br>
</div>
<div id="footer">footer text</div>
</div>
</body>
</html>

Мне нужен стик #leftColumnBottom в верхней части нижнего колонтитула и красный #leftColumnMiddle, чтобы заполнить пространство между верхней и нижней частью.

Ответы [ 3 ]

3 голосов
/ 03 февраля 2009

Это работает во всем, кроме IE6; для этого вам понадобится условный комментарий и выражение css для установки высоты вместо bottom на #leftColumnMiddle

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style>* { border: 1px solid black;}
#contentWrapper     { position: relative; float:left; width: 450px; }
#leftColumnTop      { position: absolute; width: 100px; height: 50px; left: 0; background-color: gray; }
#leftColumnMiddle   { position: absolute; width: 100px; top: 50px; bottom: 50px; left: 0; background-color: red; }
#leftColumnBottom   { position: absolute; width: 100px; height: 50px; left: 0; bottom: 0; background-color: gray; }
#content            { width: 300px; float: left; margin-left: 100px;}
#footer             { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
    <div id="leftColumnTop"> </div>
    <div id="leftColumnMiddle"> </div>
    <div id="leftColumnBottom"> </div>
    <div id="content">content<br>
    here<br>more<br>more<br>more<br>more<br>more<br>more<br>
    </div>
</div>
<div id="footer">footer text</div>
</body>
</html>

А комментатору - это почти сработало, вот почему. ;)

0 голосов
/ 03 февраля 2009

Если вам нужно, чтобы оба столбца были одинаковой высоты, и работают в IE6, вам, в основном, придется взломать.

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

Это решение обрисовано в общих чертах здесь .

Цитирование со страницы, на которую я ссылался:

Основной метод работает так:
  1. Блоки, которые будут действовать как столбцы, должны быть заключены в элемент контейнера
  2. Применить переполнение: скрыто к элементу контейнера
  3. Примените padding-bottom: $ big_value [2] к блокам столбцов, где $ big_value является
  4. Применение поля на полях: - $ big_value к блокам столбцов
0 голосов
/ 03 февраля 2009

попробуйте минимальную высоту для того, который должен расти

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

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

...