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

mislin · 25.03.2007, 10:40

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

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

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

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>

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид