Таблица и height 100%

tonik_spb · December 3, 2008

есть код

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



  <table border=0 height="425" width="568" cellpadding="0" cellspacing="0">
		<tr><td width="555" valign="top" height="100%">
		<p></p>
		</td>
   		<td width="13" valign="top" style="display:block">
			<table height="100%" width="13" cellpadding="0" cellspacing="0" >
	   		<tr>
	   		  <td height="130" bgcolor="GREEN"></td><tr><td height="100%" bgcolor="RED"> </td></tr><tr>
	   			<td height="195" bgcolor="PINK"></td></tr>
	   		</table>
   		</td></tr>
	</table>


</html>

в FF все нормально и Красная полоска заполняет все что осталось от зеленой и розовой (тоесть 2 строка резиновая)

как сделать так чтобы во всех браузерах

Заранее спасиб =)

Edited December 3, 2008 by tonik_spb

klierik · December 3, 2008

макет покажите графически.. может не обязательно делать на таблицах

tonik_spb · December 3, 2008

http://forum.htmlbook.ru/index.php?showtop...amp;#entry78461

идея та же самая =)) просто интересно реализование ее и так и так =))

SelenIT · December 4, 2008

Во-первых, в строгом режиме у таблицы нет атрибута height, высоту можно задавать исключительно через стили (да и ячейкам, по-хорошему, тоже). Во-вторых, не надо указывать ячейкам таблицы "display:block", в браузерах, поддерживающих стандарты, у ячейки свой особый display:table-cell и его нечаянное переопределение может развалить таблицу к свиньям собачьим. В третьих, пора приучаться писать код аккуратно, не путая и не теряя открывающие и закрывающие теги (даром что HTML это прощает). Ну и наконец: в чем прикол резиновой средней строки, если общая высота внешней таблицы все равно фиксирована?

tonik_spb · December 4, 2008

да извиняюсь за неокуратность кода =)) эт после долгих экспериментов в dreamweaver видимо оно тама свою руку без моего ведома приложимло =)

про display: block; ваше мне не понятно откуда взялась =))) видимо опять же dreamweaver постарался =))

а про фиксированную внешнюю таблицу эт сделанно к примеру... Ведь всеравно если там будет больше текста чем надо (overflow не задан) то таблица будет растягиваться.

Storm · May 14, 2009

Проблема та же, но ответа тут не нашел, поэтому продолжаю тему.

Вот простой код

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
<!--
* {margin:0;padding:0;}
html, body {height:100%;}
table {width:100%;height:100%;}
.content {height:100%;background:green;}
.footer {height:100px;background:gray;}
-->
</style>
</head>

<body>
<table>
<tr><td class="content">content</td></tr>
<tr><td class="footer">footer</td></tr>
</table>
</body>
</html>

Задача: именно с таким доктайпом сделать футер прижатым к низу страницы.

Комментарии: в IE6 td.content растягивается на 100% высоты страницы; получалось реализовать это слоями, но на странице будет динамический контент (разъезжающееся меню, перезагрузка текстовой области страницы и др.) и в IE слой с футером остается на месте (т.е. не прижимается к низу при изменении контента страницы).

Вопрос: реально ли реализовать такую задачу в табличной верстке?

Searcher · May 14, 2009

http://www.zakharov.ms/footer/

Storm · May 14, 2009

Вопрос: реально ли реализовать такую задачу в табличной верстке?

Спасибо за содействие, но нужна табличная верстка.

ayc · May 20, 2009

Спасибо за содействие, но нужна табличная верстка.

Задайте 100% высоты для элемента html:

html, body { height: 100%; }

table { height: 100%; ...

Тогда strict-режим становится похож на transitional.

Storm · May 22, 2009

Задайте 100% высоты для элемента html:
html, body { height: 100%; }
table { height: 100%; ...
Тогда strict-режим становится похож на transitional.

Хм, посмотрите код выше, там всё это есть, но тем не менее не работает

Sign In

Таблица и height 100%

Question

tonik_spb

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

tonik_spb

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

tonik_spb

Link to comment

Share on other sites

Storm

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Storm

Link to comment

Share on other sites

ayc

Link to comment

Share on other sites

Storm

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information