Форум Flasher.ru - Div или Table Height=100%

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)

- - Div или Table Height=100% (http://www.flasher.ru/forum/showthread.php?t=140029)

Div или Table Height=100%

Есть простая страница - колонка посередине, слева background div, справа backround div (оба на всю вышину). То есть макет элементарнейший.
Условия:
1) doctype transitional (с ссылкой на документацию)
2) кроссбраузерность.

на все таги вешаем как положено height:100%, на html,body и контентные.

Теперь траблы:
или надо выкидывать doctype или IE.
Собственно, что таблица, что div-ы с height:100% ведут себя точно также, разницы нет в чем верстать. Забудем по причине работоспособности о других браузерах кроме ИЕ.

Все вытягивается нормально до момента когда длинна контента не превышает вышины ока браузера. Как только появляется scroll, то вышина diva остается равной вышине окна а не реальной страницы. (Нафига нужен height 100% если это height окна а не документа??)

код:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



<head>

        <title>proba</title>

        <style>

                html,body {height:100%; width:100%;}

                body {margin:0; padding:0;}

                #allpage {width:100%; height:100%; border:0;}

                #left,#content,#right {float:left; height:100%; border:3px solid #ff0000;}



        </style>

</head>



<body>

<div id="allpage">



<div id="left">aaa</div>

<div id="content">bbb</div>

<div id="right">ccc</div>



</div>

</body>

</html>

все прекрасно пока в id="content" не сунете для IE 100 раз bbb<br>bbb<br>

с таблцей аналогично:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

        <title>proba</title>

</head>

<body style="height:100%; margin:0; padding:0;">

<table border="1" style="height:100%"><tr>

        <td style="height:100%">

        <table border="1" style="height:100%">

                <tr><td>asdasd1</td></tr>

                <tr><td>asdasd2</td></tr>

        </table>

        </td>

        <td style="height:100%">sdsdsd<br>sdsdsd<br>... povtorite 100 raz...</td>

</tr>

</table>

</body>

описание стилем или height="100" неважно ибо за пределами обуждения спецификации doctype.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
решает проблему, на как сказал это невыполнение условия, и нет линка на документацию спецификации.

всякие fixed + absolute тут не причем и проблемы не решат.

Какие нить идеи? У меня башка кипит, это же простейший макет самого распостраненного дизайна.

2 раза прочитал.. не очень пронял суть проблемы)

Вам надо что бы 3 колонки были одинаковы по высоте? и растягивались с окном по высоте?

если так то на скорую руку:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



<head>

        <title>proba</title>

        <style>

                body {margin:0; padding:0;}

                #allpage {width:100%; 

                border:0;

                overflow: hidden;

                }

                #left,#content,#right {

                        float:left; 

                        border:3px solid #ff0000;

                        padding-bottom: 32767px;

                         margin-bottom: -32767px;

                }



        </style>

</head>



<body>

<div id="allpage">



<div id="left">

ПОВТОРИТЕ ЭТО 100 РАЗ<br>

</div>

<div id="content">bbb</div>

<div id="right">ccc</div>



</div>

</body>

</html>

Поидее бы поняли правильно, но тут ключевое слово растягивались а не обрезались.

Этот код не работает и не то.
Он просто обрезает длиннющие дивы снизу под величину контента, а надо именно чтоб растягивал их (потом туда пойдут 5 слоев, включая backgournd-position:bottom)

Простым языком надо чтоб высота дива была равна:
а) высоте окна если контента мало
б) высоте контента если его много.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

        <title>proba</title>

</head>

<body style="height:100%; margin:0; padding:0;">

<table border="1" style="height:100%"><tr>

        <td style="height:100%">

        <table border="1" style="height:100%">

                <tr><td>asdasd1</td></tr>

                <tr><td>asdasd2</td></tr>

        </table>

        </td>

        <td style="height:100%">sdsdsd<br></td>

</tr>

</table>

</body>

Вот такая штука должна получится. (это работает вроде везде.)
Только для doctype как было сказано.

То что я скинул.
он не обрезает содержимое.

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

У меня растягивается.. и содержимое не пропадает.

увы, думаю вы в браузере увидите ту-же картинку:
как у вас получилось

вот, как надо.
Поресайзите размер окна чтоб оно было то больше контента, то меньше.

уууфффф.... пришлось вспомнить раскладку... вообщем вот проверяйте

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

        <title>proba</title>

        <style>

                html {

                        height: 100%;

                }

                

                body {

                        height: 100%;

                        margin: 0; 

                        padding: 0;

                }

                

                #allpage {

                        height: auto !important;

                        height: 100%;

                        min-height: 100%;

                        overflow: hidden;

                }

                        

                #left, #content, #right {

                        float: left; 

                        height: 100%;

                        padding-bottom: 32767px;

                         margin-bottom: -32767px;

                        border: 3px solid #ff0000;

                }



        </style>

</head>



<body>

<div id="allpage">



        <div id="left">

            aaa<br>

            aaa<br>

            aaa<br>

            aaa<br>

            aaa<br>

            aaa<br>

        </div>

    

        <div id="content">

            bbb<br>

            bbb<br>

            bbb<br>

            bbb<br>

            bbb<br>

            bbb<br>

        </div>

    

        <div id="content">

            ccc<br>

            ccc<br>

            ccc<br>

            ccc<br>

            ccc<br>

            ccc<br>

        </div>



</div>

</body>

</html>

формально он все-же обрезает вытянутый див а не растягивает.
Потому как если сунем в div id="left" style="background:url(image.jpg) no-repeat bottom", то ее небудет видно.

top будет, а bottom улетит вниз на 32000 пикселей.

Вы от браузера на 2010 год хотите невозможного...

Для таких целей уже JavaScript в руки! Смотрите размер окна, размер дивов.. ставити стили...

ну с виду выглядит как элементарнейший макет - обычная страница вытянута до конца.
правда, справа и слева требуются background картинки, аж 5 слоев
например для #left: (один repeat img, второй repeat-x top, третий repeat-y right, 4-ый no-repeat top right, 5-ый no-repeat right bottom).