Форум Flasher.ru - Как решить проблему height=100% кроссбраузерно

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

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

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

- - Как решить проблему height=100% кроссбраузерно (http://www.flasher.ru/forum/showthread.php?t=93605)

mislin

25.03.2007 10:40

Как решить проблему height=100% кроссбраузерно

Меня давно мучает вопрос, ка же всетаки сделать так, чтобы футер на всех браузерах был в низу, а не по середине, не наверху, а именно внизу!!!

синтаксис <table height='100%'....
<td height='100%'....

помогает только в лучае с ИЕ-6, а вот Опера, Мозила и т.д. этого нифига не понимают, для Оперы и Мазилы, я эту проблему решал так:

простенький JavaScript в тэге head и событие к боди на загрузку

Код:

<script language="javascript">

<!--

function findLivePageHeight () {

if (window.innerHeight != null)

        return window.innerHeight;

if(document.body.clientHeight != null)

        return document.body.clientHeight;

return null;

}

function tableSize (name) 

{

        var windowHeight = findLivePageHeight ();

        var table = document.getElementById (name);

        var tablesize = windowHeight ;

        table.style.height= tablesize+'px';

} 

-->

</script>

</head>



<body marginheight="0" marginwidth="0"  onload="tableSize('main_table')">

Но тут появился страшный и ужасный ИЕ-7 КОТОРЫЙ ВООБЩЕ НИФИГА не понимает, повлиять на его поведение может тока чудо!!!! ни один из вышеперечисленных способов на него не действует.... с Явой не помогает, по тому, что это уродское творение Майкрософта средствами Явы может тока определить высоту Боди, который в свою очередь, не польше не меньше контента который в этом боди...!!!

че делать фиг знает:rtfm:

etc	25.03.2007 14:58

А код кто оформлять будет?

mislin

25.03.2007 16:11

Пойдет?

etc	25.03.2007 16:24

Пойдет.

Skubent

26.03.2007 12:39

Первое. Ява и ЯваСкрипт - это разные вещи.
Не хочется огорчать автора топика, но задача "прибить футер вниз страницы" является самой _находимой_ задачей начинающих верстальщиков. В том числе и на этом форуме.

SPV	26.03.2007 12:58

Огромные комманды умных людей тратят свое время и деньги, разрабатывая всевозможные стандарты, чтобы упростить жизнь разработчикам софта и тем, кто этот софт потом использует... Уж никак не для того, чтобы такие кодеры, как мы на все наплевали и делали "лишь бы работало", подгоняя под все и вся. И при этом мы гоним на "тупых разработчиков" браузеров, чей продукт нифига не понимает что мы от него хотим своими извращениями. Это все равно, что пытаться объаснить папуасу Новой Гвинеи что-нибудь на якутском языке и удивляться, почему он нас не понимает :)
Если мы хотим добиться правильного отображения нашей информации в браузере, то как минимум нужно:
1. Привести свой код к какому-нибудь стандарту - HTML 4.01 Transitional, HTML 4.01 Strict, XHTML и т.п. (выбирается исходя из исходных данных для страницы, дизайна, предпочтений кодера).
2. ОБЯЗАТЕЛЬНО указать выбранный стандарт в верху страницы.
3. Желательно себя проверить и скормить страницу валидатору разметки.
4. Пинять разработчиков браузера, если он НЕПРАВИЛЬНО показывает наш ПРАВИЛЬНЫЙ код.

Т.е. в нашем случае можно выбрать HTML 4.01 Transitional и привести разметку в соответствии с ним - как минимум заменить все <table height='100%'> на <table style="height:100%;">. Потом указываем, какой стандарт мы используем, добавив <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> в самый верх страницы. И, окончательно, скармливаем полученный файл валидатору http://validator.w3.org/ и правим вываливающиеся ошибки, пока не получим что-то наподобие http://validator.w3.org/check?uri=ht...Fwww.w3.org%2F

whiteRed

26.03.2007 13:01

<table height='100%'....-- так и делай, только убери dtd в начале страницы - будет работать в большинстве браузеров

сделать с валидным кодом на таблицах не получится

SPV	26.03.2007 13:14

Цитата:

Сообщение от whiteRed

сделать с валидным кодом на таблицах не получится

А как на счет добавить "как мне кажется" или "я думаю"? А то уж больно как-то категорично получилось :)

Первый попавшийся пример - http://www.apache.org/ Проверка -
http://validator.w3.org/check?uri=ht...doctype=Inline

Браузеры не обязаны и не будут поддерживать невалидный код.

etc	26.03.2007 13:16

SPV, у тебя монитор по высоте больше, чем контент на странице apache.org?
Если уменьшить текст, то футер нифига не прилипает вниз.

SPV	26.03.2007 13:30

Код:

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

<html>

<head>

<title>Hello world</title>

<style type="text/css">

body {margin: 0; height: 100%;}

body table {margin: 0; width: 100%; height: 100%;}

</style>

</head>

<body>

<table>

  <tr>

    <td align="center" valign="bottom">Текст снизу</td>

  </tr>

</table>

</body>

</html>

etc	26.03.2007 13:31

W3C говорите? Одну строчку забыли в DOCTYPE.

Код:

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

<html>

<head>

<title>Hello world</title>

<style type="text/css">

body {margin: 0; height: 100%;}

body table {margin: 0; width: 100%; height: 100%;}

</style>

</head>

<body>

<table>

  <tr>

    <td align="center" valign="bottom">Текст снизу</td>

  </tr>

</table>

</body>

</html>

Снизу? :)

SPV	26.03.2007 13:44

Добавим в стилях 100% высоту у html:

Код:

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

<html>

<head>

<title>Hello world</title>

<style type="text/css">

html, body {margin: 0; height: 100%;}

body table {margin: 0; width: 100%; height: 100%;}

</style>

</head>

<body>

<table>

  <tr>

    <td align="center" valign="bottom">Текст снизу</td>

  </tr>

</table>

</body>

</html>

etc	26.03.2007 13:49

Вот это уже другой разговор :)
Можно уже Strict писать.

KidsKilla

26.03.2007 13:58

Код:

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

<html>

<head>

<title>test</title>

<style type="text/css">

*{margin:0;padding:0;}

HTML,BODY{height:100%;}

</style>

</head>

<body>

<div style="min-height:100%;_height:100%;margin-bottom:-100px;">content</div>

<div style="height:100px;background:pink">foot</div>

</body>

</html>

whiteRed

26.03.2007 14:02

почти готов признать свою ошибку...
только как вот такое правильно сделать? ведь от таблицы с одной ячейкой толку никакого

Код:

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

<html>

<head>

<title>Hello world</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

html, body {margin: 0; height: 100%;}

</style>

</head>

<body>

<table style="margin: 0; width: 100%; height: 100%;">

  <tr>

    <td align="center" valign="top">Текст сверху</td>

  </tr>

  <tr style="height: 100%;">

    <td align="center" valign="center" style=" border: 1px solid red;">Текст в центре</td>

  </tr>

  <tr>

    <td align="center" valign="bottom">Текст снизу</td>

  </tr>

</table>

</body>

</html>

KidsKilla

26.03.2007 14:07

Код:

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

<html>

<head>

<title>test</title>

<style type="text/css">

*{margin:0;padding:0;}

HTML,BODY{height:100%;}

</style>

</head>

<body>

<div style="min-height:100%;_height:100%;margin-bottom:-100px;"><div style="padding-top:50px;">content</div></div>

<div style="height:100px;background:pink">foot</div>

<div style="height:50px;background:green;position:absolute;top:0;left:0;width:100%;">top</div>

</body>

</html>

или

Код:

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

<html>

<head>

<title>test</title>

<style type="text/css">

*{margin:0;padding:0;}

HTML,BODY{height:100%;}

</style>

</head>

<body>

<div style="min-height:100%;_height:100%;margin-bottom:-100px;">

<div style="height:50px;background:green;">top</div>

content</div>

<div style="height:100px;background:pink">foot</div>

</body>

</html>

whiteRed

26.03.2007 15:15

Цитата:

Сообщение от whiteRed

сделать с валидным кодом на таблицах не получится

я все-таки был прав?

SPV	26.03.2007 16:40

Да, если нужно сделать именно так - верх, низ, ВСЕ остальное центр, то IE6 обрабатывает неверно. Можно вместо height:100% у среднего ряда поставить height:1px у верхнего и нижнего, но у IE средняя ячейка займет не все оставшееся место. В этом случае лучше использовать слои, а не таблицы... Или верстать так, что у таблицы две строки - в нижней футер, прижатый к низу, а в верхней - прижатая к верху вложенная таблица с футером и контентом...

KidsKilla

26.03.2007 20:00

забудьте уже слово таблица вне контекста. на кой ляд?

mislin

27.03.2007 21:49

Даа.. ну в общих чертах туман рассеялся :)

mislin

27.03.2007 22:03

KidsKilla - min-height:100% - насколько я помню ИЕ-шник такого свойства CSS не знает

etc	27.03.2007 22:08

Зато он знает expression.

mislin

27.03.2007 22:23

Цитата:

Сообщение от __etc

Зато он знает expression.

А вот это мысль! основные проблемы у меня с ИЕ-7 и если он схавает, то в принципе проблема будет исчерпана, если использовать все методы в совокупности

etc	27.03.2007 22:26

Как-то так:

Код:

//height: expression(document.body.offsetHeight<860 ? "860px" : "100%");

//width: expression(document.body.offsetWidth<950 ? "950px" : "100%");

width: 100%;

height: 100%;

min-height: 860px;

min-width: 950px;

Два слеша нужны, это не коммент.

whiteRed

28.03.2007 10:33

2etc: это хак такой - со слешами? а где про него почитать можно?

etc	28.03.2007 13:45

http://dev.tufuncion.com/css-trick

whiteRed

28.03.2007 13:49

2KidsKilla:
все равно css не валидный :confused:

Цитата:

Сообщение от Валидатор

Property _height doesn't exist

etc	28.03.2007 14:05

Цитата:

Сообщение от whiteRed

2KidsKilla:
все равно css не валидный :confused:

А где там валидатор нашел _height?

CAM	28.03.2007 14:45

работает везде!

http://scott.sauyet.com/CSS/Demo/FooterDemo1.html

whiteRed

28.03.2007 15:18

Цитата:

Сообщение от __etc

А где там валидатор нашел _height?

ну я эти стили в css прописал, и он теперь не валидируется:(

whiteRed

28.03.2007 15:22

Цитата:

Сообщение от CAM

http://scott.sauyet.com/CSS/Demo/FooterDemo1.html

Цитата:

It does not work in Opera 6.

а у меня в 8ой опере футер уезжает ниже границы

KidsKilla

28.03.2007 18:57

Народ, я же дал рабочий ВЕЗДЕ вариант, нах*ра придумывать веллосипед о 5ти колёсах???

min-height:100%; стандартное св-во
_height:100%; св-во для ие -- остальные его не поймут, а в ие height работает почти так как во всех нормальных min-height;

то что не проходит ксс-валидатор я знаю.
ибо ксс-валидатор (в отличие от хтмл-валидатора) вещь до несусветности идиотическая и ненужная. как корове седло.

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

пс
да, и про експрешшн. не трогайте вы его без надобности, а..
ибо напороться на вылет ие как 2 пальца обасфальт, а сделать чего толкового сложно очень.

etc	28.03.2007 19:08

KidsKilla,
http://www.artlebedev.ru/tools/techn...fixed_in_msie/
:D

Что касается валидатора, то либо мы видим одно и то же в разных браузерах, либо «Valid!» на странице валидатора.

По мне, если ты предложишь замену expression для ограничения размеров дива, я буду только рад. Потому как мне это было актуально, да и щас неплохо было бы узнать более интересный вариант (ибо CSS и HTML я толком не ковыряю, всех тонкостей не знаю).

KidsKilla

28.03.2007 19:09

вот только не надо сравнивашть шитова и тех кто тусуется на флешере.

etc	28.03.2007 19:15

Цитата:

Сообщение от KidsKilla

вот только не надо сравнивашть шитова и тех кто тусуется на флешере.

Пока ты успел ответить, я пост дописал :)
Предложи вариант.

А Шитов и иже с ним ничего не находят такого криминального в expression, это я к этому ссылку дал. Впрочем, если есть аргументы и примеры против или за, с удовольствием выслушаю (так сказать, в качестве стороннего слушателя, ибо аштимель с цеэсэсом не мое, но иногда нужно).

KidsKilla

28.03.2007 19:23

итак.
я тоже не вижу криминала в експрешшене, но это как острый нож в руки ребёнка — либо убьёт ся к чертям либо станет чудо-ниндзя. а взрослые, которые умеют им пользоваться, пусть пользуются.

Цитата:

Сообщение от __etc

либо мы видим одно и то же в разных браузерах, либо «Valid!»

пра-виль-но. и более того, одно другого не исключает.
но «Valid!» относится к HTML валидатору, а не к ксс.

потому что валидатор к кссу это как генсек при коммунизме. с одной стороны "типа коммунизьм", делай што хош; с другой стороны генсек сказал нет и все про коммунизьм то и забыли, страдаем-с. тупо.

etc	28.03.2007 19:42

Цитата:

Сообщение от KidsKilla

Т.е. вариантов, лучше, чем expression, нет? Я вроде не маленький, не сломаю :D

KidsKilla

28.03.2007 20:31

Цитата:

Сообщение от __etc

Т.е. вариантов, лучше, чем expression, нет? Я вроде не маленький, не сломаю :D

фак. я же привел вариант БЕЗ экспрешшна. где твои глаза, злобный модер? =)

etc	28.03.2007 20:38

Видимо не на том месте, но я не нашел :D

KidsKilla

28.03.2007 20:46

Цитата:

Сообщение от __etc

Видимо не на том месте, но я не нашел :D

мдааа...
http://flasher.ru/forum/showpost.php...7&postcount=16

Часовой пояс GMT +4, время: 01:49.

Страница 1 из 2

Показывать 40 сообщений этой темы на одной странице

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.