Вы хотите, чтобы столбец расширялся до той же высоты в CSS-макете с 3 столбцами? - PullRequest
2 голосов
/ 09 марта 2009

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>This is my page</title>
<style type="text/css">

body
{
    background-color:#aaaaaa;
}

#container
{
    width:900px;
    margin-left:auto;
    margin-right:auto;
}

#leftborder
{
    float:left;
    width:10px;
    background-color:#ff0000;
}

#rightborder
{
    margin:0; padding:0;

    float:right;
    width:10px;
    background-color:#ff0000;
}

#middlecontainer{
    margin:0 10px;
}
</style>

</head>
<body>

<div id="container">
<div id="leftborder">
a
</div>
<div id="rightborder">
a
</div>

<div id="middlecontainer">
This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content This is is content 
</div>

</div>


</body>
</html>

Ответы [ 3 ]

3 голосов
/ 09 марта 2009

Пока ваша страница имеет фиксированную ширину, вы можете применять Faux Columns -технику.

Короткая версия: Повторите изображение как фоновое изображение в "wrapper-div", чтобы оно выглядело, как будто вся страница растягивается, даже если содержимое div-элементов внутри всего несколько строк.

1 голос
/ 09 марта 2009

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

0 голосов
/ 09 марта 2009

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

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

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