VPF::height:100% у div'а - Форум программистов

Georgich

Дата 3.6.2008, 18:19 (ссылка)

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

Загрузка ...

Шустрый

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

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

Приветствую!
Пересмотрел похожие темы, но ничего полезного и толкового не нашел.
Вот моя разметка:

Код


body{margin:0; padding:0; height: 100%; font-family:Arial;}
html {height: 100%;}
* html  #maincontainer{height: 100%;}
* {margin:0; padding: 0;}

#topsection{background:url(www2.png) no-repeat; height: 100px; border-bottom: 1px #B3B3B3 solid; padding: 100px 0px 0px 585px;}
#topsection .menu{float:left; width:200px; font-size:13px; font-weight:bold;}
#topsection .menu ul{list-style: square;}
#topsection .menu li{line-height: 17px;}
#topsection .menu a{text-decoration:none; color: #000;}
#topsection .menu a:hover{text-decoration:underline; color: #DF6226;}
#flash {position: absolute;    padding-top: 63px;}
#contentwrapper{float: left; width: 100%;}
#contentcolumn{margin: 0px 200px 0px 200px; padding: 10px 10px 10px 10px;}
#maincontainer{min-height: 100%;}
#leftcolumn{float: left; width: 200px; margin-left: -100%; text-align: center; background: url(fon.png) right top no-repeat;}
#path{background:url(path.png) repeat-x; height: 23px; margin: 0px 200px 0px 200px; border-bottom: 1px #FFF solid;}
#search{background: #DDD; height: 41px; margin: 0px 200px 0px 200px;}
.menu2{padding:30px 10px 0px 10px; font-size:14px;}
.menu2 ul{padding-left:7px; list-style:none; padding-top:10px;}
.menu2 li{padding-left:10px; text-align:left; background:url(www1.png) no-repeat 0; font-size:13px; font-weight:bold; line-height: 17px;}
.menu2  a{color: #DF6226; text-decoration:none;}
.menu2 a:hover{text-decoration:underline;}

#rightcolumn{float: left; width: 200px; margin-left: -200px; text-align: center; background: url(fon.png) left top no-repeat;}
#footer{clear: left; width: 100%; background: #DDD; color: #FFF; text-align: center; padding: 4px 0; border-top: 1px #AAA solid;}
#footer a{color: #FFFF80;}

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=cp-1251">
<title></title>
<link rel="stylesheet" href="./i/style.css" media="screen" type="text/css">
</head>
<body>
<div id="flash">

</div>
<div id="maincontainer">
    <div id="topsection">
        <div class="menu">

        </div>
    </div>
    <div id="contentwrapper">
        <div id="path"></div>
        <div id="search"></div>
        <div id="contentcolumn">

        </div>
    </div>
    <div id="leftcolumn">
        <div class="menu2">
            <b>Заголовок:</b><br />

        </div>
    </div>
    <div id="rightcolumn">
        <div class="menu2">
            <b>Текст:</b>

        </div>
    </div>
</div>
    <div id="footer">Подвал</div>
</body>
</html>

Визуально это выглядит как это : http://www.dynamicdrive.com/style/layouts/...ed-fluid-fixed/
Но только подвал прижат к низу.
Ну и собственно вопрос: как исхитриться и сделать иллюзию того, что колонки по бокам имели один и тот же фон, а по центру колонка друной фон? Т.е. чтобы было видно, что колонки как бы прижимаются к подвалу, а не висят в воздухе, т.к. одна колонка может быть больше другой.
P.S. Есть вот такой хитромудрый метод : http://www.alistapart.com/articles/fauxcolumns/ , но я что-то не до конца осознал как мне его применить.
СПАСИБО!

lukas

Дата 3.6.2008, 18:58 (ссылка)

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

Загрузка ...

Опытный

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

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

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

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

http://code.google.com/p/orionphp/ - opensource скриптовой язык Orion (аналог PHP) для freepascal/delphi.

Georgich

Дата 3.6.2008, 19:00 (ссылка)

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

Загрузка ...

Шустрый

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

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

Уффф... Сделал для своей разметки. Разобрался с методом Faux Columns. Все, что требовалось, так это сделать так:

Код


html {height: 100%; background: url(bck.png) repeat-y left top;}
....
#maincontainer{min-height: 100%; background: url(bck.png) repeat-y right top;}

Думаю, что будет полезно тем, кто будет делать страницу по такой же разметке.

lukas

Дата 3.6.2008, 19:04 (ссылка)

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

Загрузка ...

Опытный

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

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

Georgich, IE6 не поддерживает min-width... есть некоторые трюки... но все это как то геморойно... через таблицу никакие трюки не нужны... сделай смешанную верстку... я иногда не понимаю эту моду с блоками...

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

http://code.google.com/p/orionphp/ - opensource скриптовой язык Orion (аналог PHP) для freepascal/delphi.

SelenIT

Дата 3.6.2008, 19:16 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Цитата(lukas @ 3.6.2008, 19:04

)

через таблицу никакие трюки не нужны...

Только в простейшем случае (одна <tr>). Стоит появиться малейшей нетривиальности (сочетание строк фиксированной и тянущейся высоты, объединенные по высоте ячейки и т.п.), тот же IE портит всю малину. Лучше все-таки разобраться с блоками, я считаю.

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Georgich

Дата 3.6.2008, 19:37 (ссылка)

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

Загрузка ...

Шустрый

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

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

lukas, у меня нет нигде min-width. Возможно, ты имел ввиду min-height?
IE прекрасно понимает это:

Код

* html #maincontainer{height: 100%;}

Думаю, что дисскуссию насчет семантической разметки или табличной верстки вести не стоит. Не тот пост. Да и вопрос я решил. Так что, если кто столкнется с похожей проблемой, то решение приведено.

lukas

Дата 3.6.2008, 20:29 (ссылка)

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

Загрузка ...

Опытный

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

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

хм... стоит попробовать...

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

http://code.google.com/p/orionphp/ - opensource скриптовой язык Orion (аналог PHP) для freepascal/delphi.

Eltimo

Дата 4.6.2008, 12:32 (ссылка)

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

Загрузка ...

Новичок

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

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

Спасибо за решение , пригодилось

Georgich

Дата 30.6.2008, 01:14 (ссылка)

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

Загрузка ...

Шустрый

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

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

Вот тут еще одно решение нашел этой задачи: http://web-communism.livejournal.com/5417.html
Более демократичное и не такое геморрное.

kovrolin

Дата 19.4.2011, 14:20 (ссылка)

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

Загрузка ...

Новичок

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

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

Топикстартеру

Вот перевод упомянутой статьи http://www.alistapart.com/articles/fauxcolumns/ на русский, возможно будет понятней smile

Искусственные столбцы

zoobird

Дата 20.5.2011, 20:34 (ссылка)

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

Загрузка ...

Новичок

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

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

Не люблю дивы, по моему лучше с таблицами работать.

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