VPF::Резиновый макет с колонками во всю высоту окна

AXS

Дата 12.10.2012, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 26.9.2008
Где: РК

Репутация: нет
Всего: -1

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

user posted image

Следующий код прижимает футер к низу.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="ru-ru" />
    <meta http-equiv="content-style-type" content="text/css" />
    <title>Резиновый макет</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
    <div id="wrapper">
            <div id="header">    
                <a href="/" title="На главную">Резиновый макет</a>               
            </div>
            
            <div id="rasporka"></div>        
    </div>  
    <div id="footer">
        <p>© <a href="http://bloggu.ru">Алексей Бабиев</a> 2012 г.</p>
    </div>
</body>
</html>

Код


* {
margin: 0;
padding: 0;
border: 0;
}

html, body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
    width: 100%;
    height: auto !important;
}

* html #wrapper {
    height: 100%;
}

#header {
    background-color: #f9edbc;
    height: 115px;
}

#clear{
    height: 0;
    clear: both;
    width: 100%;
}

#rasporka {
    height: 115px;
}

#footer p {
    text-align: center;    
}

(Я вырезал всё лишнее, оставив саму суть метода)

По идее осталось ввернуть две колонки и растянуть их на всю высоту, но как-то не выходит у меня. Поэтому прошу форумчан помочь доверстать макет.

PS: Следует использовать блочную вёрстку и css

--------------------

<><><> AXS - Live Organizer v1.0 <><><> 0_o

AXS

Дата 12.10.2012, 23:16 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 115
Регистрация: 26.9.2008
Где: РК

Репутация: нет
Всего: -1

Проблемный макет в действии — http://bloggu.ru/maket/
Он же в архиве файлами в аттаче.

Это сообщение отредактировал(а) AXS - 12.10.2012, 23:19

Присоединённый файл ( Кол-во скачиваний: 3 )

www.zip 3,45 Kb

--------------------

<><><> AXS - Live Organizer v1.0 <><><> 0_o

bork

Дата 16.10.2012, 13:08 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 98
Регистрация: 4.1.2008

Репутация: нет
Всего: нет

Достаточно большой выбор макетов на все случаи жизни

http://blog.html.it/layoutgala/

trifler

Дата 24.10.2012, 21:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 11
Регистрация: 15.3.2009
Где: г.Калуга

Репутация: нет
Всего: нет

Если не напрягает использование скриптов, то вот здесь можно выбрать то, что нужно - http://csslayout.ru/layout/floatjs/floatjs1.htm
Тени и закругления выполнить при помощи CSS3
Добавив стили в любой пример:

Код


html,body {height:100%}
.col {min-height:100%}

в зависимости от высоты header и footer можно получить макет со 100% высотой

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »