Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.09.2012, 23:05
Аспирант
Отправить личное сообщение для ansi_str Посмотреть профиль Найти все сообщения от ansi_str
 
Регистрация: 27.01.2012
Сообщений: 50

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

Делаю так:

<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>
Ответить с цитированием
  #2 (permalink)  
Старый 26.09.2012, 23:17
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

position:fixed не?
Ответить с цитированием
  #3 (permalink)  
Старый 26.09.2012, 23:27
Аспирант
Отправить личное сообщение для ansi_str Посмотреть профиль Найти все сообщения от ansi_str
 
Регистрация: 27.01.2012
Сообщений: 50

Сообщение от bes Посмотреть сообщение
position:fixed не?
Не, я хочу независимо от содержания трёх колонок, чтобы их высота (фон) тянулась от хедера до футера.
Ответить с цитированием
  #4 (permalink)  
Старый 26.09.2012, 23:30
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

Сообщение от ansi_str
футер был всегда привязан к дну окна браузера
если так то точно
position:fixed
в другом случае относительные еденицы измерения
Ответить с цитированием
  #5 (permalink)  
Старый 26.09.2012, 23:33
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

ansi_str,
ссори туплю, я думаю как вариант обернуть хедер и футер в один див и этот див привязать к низу
Ответить с цитированием
  #6 (permalink)  
Старый 26.09.2012, 23:33
Аспирант
Отправить личное сообщение для ansi_str Посмотреть профиль Найти все сообщения от ansi_str
 
Регистрация: 27.01.2012
Сообщений: 50

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

У меня не получатся растянуть колонки от хедера до футера во всю высоту, независимо от их содержания.
Ответить с цитированием
  #7 (permalink)  
Старый 26.09.2012, 23:35
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

ansi_str,
Сообщение от ansi_str
всю высоту
тогда другой вопрос, во всю высоту чего? документа? страницы?
Ответить с цитированием
  #8 (permalink)  
Старый 26.09.2012, 23:35
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

display: (table, table-cell) http://htmlbook.ru/css/display
Ответить с цитированием
  #9 (permalink)  
Старый 26.09.2012, 23:45
Аспирант
Отправить личное сообщение для ansi_str Посмотреть профиль Найти все сообщения от ansi_str
 
Регистрация: 27.01.2012
Сообщений: 50

Sample

Но пока не знаю как растянуть
Ответить с цитированием
  #10 (permalink)  
Старый 26.09.2012, 23:51
Аватар для Dim@
Профессор
Отправить личное сообщение для Dim@ Посмотреть профиль Найти все сообщения от Dim@
 
Регистрация: 21.04.2012
Сообщений: 951

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>

Последний раз редактировалось Dim@, 27.09.2012 в 00:19.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Одноколоночный макет страницы Макс (X)HTML/CSS 2 15.06.2008 14:52