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

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

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