Форум Flasher.ru - Как решить проблему 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)

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

Как решить проблему 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:

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

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

Огромные комманды умных людей тратят свое время и деньги, разрабатывая всевозможные стандарты, чтобы упростить жизнь разработчикам софта и тем, кто этот софт потом использует... Уж никак не для того, чтобы такие кодеры, как мы на все наплевали и делали "лишь бы работало", подгоняя под все и вся. И при этом мы гоним на "тупых разработчиков" браузеров, чей продукт нифига не понимает что мы от него хотим своими извращениями. Это все равно, что пытаться объаснить папуасу Новой Гвинеи что-нибудь на якутском языке и удивляться, почему он нас не понимает :)
Если мы хотим добиться правильного отображения нашей информации в браузере, то как минимум нужно:
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

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

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

Цитата:

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

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

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

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

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

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

Код:

<!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>