Javascript-форум - Трехколоночный макет

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Трехколоночный макет (https://javascript.ru/forum/xhtml-html-css/31940-trekhkolonochnyjj-maket.html)

Трехколоночный макет

Здравствуйте, подскажите пожалуйста:
Нужно сверстать макет, состоящий из футера, хедера и трёх колонок.
Я макет сверстал, но не знаю как растянуть колонки от футера до хедера, чтобы футер был всегда привязан к дну окна браузера, а хедер к верху окна браузера.

Делаю так:

<html>
<head>
    <style type="text/css">
        *
        {
            padding: 0;
            margin: 0;
        }
        html, body
        {
            height: 100%;
        }
        body
        {
            background: #fff;
            color: #000;
            font: 12px Tahoma, Helvetica, Arial, Verdana;
        }
        .wrap
        {
            position: relative;
            min-height: 100%;
            height: auto !important;
            height: 100%;
            width: 1000px;
            margin: 0 auto;
        }
        .clear
        {
            clear: both;
            height: 0;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        .empty
        {
            height: 100px;
        }
        .footer
        {
            position: relative;
            height: 100px;
            background: #ddd;
            width: 1000px;
            margin: -100px auto;
        }
        
        /*  other styles   */
        .header, .footer, .sidebar-left, .sidebar-right, .content
        {
            font-size: 24px;
            background: #eee;
        }
        .header
        {
            height: 100px;
        }
        .sidebar-left, .sidebar-right
        {
            width: 200px;
            background: #ccc;
        }
        .sidebar-left
        {
            float: left;
        }
        .sidebar-right
        {
            float: right;
        }
        .content
        {
            background: #fafafa;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="header">
            Шапка
        </div>
        <div class="sidebar-left">
            Левая колонка
        </div>
        <div class="sidebar-right">
            Правая колонка
        </div>
        <div class="content">
            Центральная колонка
        </div>
        <div class="clear">
        </div>
        <div class="empty">
            <!-- -->
        </div>
    </div>
    <div class="footer">
        Футер
    </div>
</body>
</html>

position:fixed не?

Цитата:

Сообщение от bes (Сообщение 206681)

position:fixed не?

Не, я хочу независимо от содержания трёх колонок, чтобы их высота (фон) тянулась от хедера до футера.

Цитата:

Сообщение от ansi_str

футер был всегда привязан к дну окна браузера

если так то точно

position:fixed

в другом случае относительные еденицы измерения;)

ansi_str,
ссори туплю, я думаю как вариант обернуть хедер и футер в один див и этот див привязать к низу ;)

Да нет, футер привязан - всё замечательно :)

У меня не получатся растянуть колонки от хедера до футера во всю высоту, независимо от их содержания.

ansi_str,

Цитата:

Сообщение от ansi_str

всю высоту

тогда другой вопрос, во всю высоту чего? документа? страницы?

display: (table, table-cell) http://htmlbook.ru/css/display

Sample

Но пока не знаю как растянуть

ansi_str,
кстати

Цитата:

Сообщение от Dim@

обернуть хедер и футер в один див и этот див привязать к низу

получится что футер уже привязанный к низу,

<style>
*
        {
            padding: 0;
            margin: 0;
        }
        html, body
        {
            height: 100%;
        }
        body
        {
            background: #fff;
            color: #000;
            font: 12px Tahoma, Helvetica, Arial, Verdana;
        }
        .wrap
        {
            position: relative;
            min-height: 100%;
            width: 1000px;
            margin: 0 auto;
            bottom:0px;
        }
        .clear
        {
            clear: both;
            height: 0;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        .empty
        {
            height: 100px;
        }
        .footer
        {
            position: relative;
            height: 100px;
            background: #ddd;
            width: 1000px;
            bottom:0px;
        }
         
        /*  other styles   */
        .header, .footer, .sidebar-left, .sidebar-right, .content
        {
            height:100%;
            font-size: 24px;
            background: #eee;
        }
        .header
        {
            height: 100px;
        }
        .sidebar-left, .sidebar-right
        {
            width: 200px;
            background: #ccc;
        }
        .sidebar-left
        {
            float: left;
        }
        .sidebar-right
        {
            float: right;
        }
        .content
        {
            background: #fafafa;
        }
</style>
<div class="parent">
    <div class="wrap">
        <div class="header">
            Шапка
        </div>
        <div class="sidebar-left">
            Левая колонка
        </div>
        <div class="sidebar-right">
            Правая колонка
        </div>
        <div class="content">
            Центральная колонка
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
        Футер
    </div>
</div>

ansi_str,
все как надо?

Dim@,

Да, он уже привязан, но колонки не тянуться по высоте, высота их зависит от контента, я хочу чтобы высота колонок не зависила от контента и тянулась :)

Немного не понимаем друг друга

ansi_str,
тупишь - они тянутся, промежуток получается из-за класса empty

.empty{
  height:100px;
}

P.S. юзай em-ы, что бы на разных компьютерах с разным разрешением получалось одинаково :)

Они не тянутся :(

ansi_str,
пиксели - это относительные еденицы измерения, но на разных компах с разным разрешением будут смотреться плохо,

Цитата:

em - высота шрифта элемента

Я хочу, чтобы вся высота от хедера до футера колонок можно было залить одним цветов.

ansi_str,
убрал empty из примера

Да, empty убрал, но не помогло.

ansi_str,
ещё раз изменил

Спасибо, но нужно, чтобы футер был виден
Чтобы не нужно было прокручивать вниз.

Чтобы футер был ещё и привязан ко дну экрана.

Я уж начинаю думать - может таблицей сделать и не мучаться...

ansi_str,

Мне лень читать тему, опиши ещё раз детально задачу, учитывая все дополнения и если это возможно сделать на CSS я вечером дам решение.