Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Резиновый макет с колонками во всю высоту окна

Автор: AXS 12.10.2012, 14:36

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

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 12.10.2012, 23:16

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

Автор: bork 16.10.2012, 13:08

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

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

Автор: trifler 24.10.2012, 21:09

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

Код


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

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