html, нужно сделать высоту таблицы по высоте родителя

77

sanich_

18 февраля 2010, 22:18

1663

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

Есть табличка, высота и ширина 100%, внутри нее 2 таблички, верхняя имеет фиксированную ширину, а нижняя табличка должна иметь оставшуюся высоту до конца страницы, что у и не получается.

вот простецкую страничку напросал:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Документ Без Имени</title>

</head>

<body>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100%">

<tr><td>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100"><tr><td>верхняя таблица с  фиксированной высотой 100pix</td></tr></table>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100%"><tr><td>нижняя таблица, нужно чтобы ее высота была до низа, если поставить высоту 100%, то высота таблицы становится равной высоте экрана и появляется вертикальная прокрутка, если размер не ставить, то высота выравнивается по содержимому таблицы</td></tr></table>

</td></tr>

</table>

</body>

</html>

Прошу решить эту проблему простым решением.

Лучший анализ бэков конкурентов - Yazzle (http://www.yazzle.ru/seo/8945eae37b4e842893f9c46afa70d80e/)

84

kil

18 февраля 2010, 23:20

#1

Вот. Работает в IE6, FF3.5.7, OPERA10. В IE7 не проверял, но думаю, работать будет.


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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Документ Без Имени</title>

</head>

<body>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100%">

<tr><td>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100" style="position: relative;"><tr><td>верхняя таблица с  фиксированной высотой 100pix</td></tr></table>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100%" style="padding-top: 100px; margin-top: -100px;"><tr><td>нижняя таблица, нужно чтобы ее высота была до низа, если поставить высоту 100%, то высота таблицы становится равной высоте экрана и появляется вертикальная прокрутка, если размер не ставить, то высота выравнивается по содержимому таблицы</td></tr></table>

</td></tr>

</table>

</body>

</html>

Итак, чтобы компенсировать высоту верхней таблицы:

padding-top: 100px; margin-top: -100px;

Чтобы верхняя таблица не перекрывалась нижней (т.е. чтобы она была выше):

position: relative;

И вообще советую уделить внимание css. Без этого сверстать что-нибудь приличное не удастся. :)

F

45

Fearful

18 февраля 2010, 23:31

#2

Простое решение


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

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

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

<title>Документ Без Имени</title> 

</head> 

<body> 

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100%"> 

<tr height="100"><td> 

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100"><tr><td>верхняя таблица с  фиксированной высотой 100pix</td></tr></table> 

</td></tr><tr><td>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100%"><tr><td>нижняя таблица, нужно чтобы ее высота была до низа, если поставить высоту 100%, то высота таблицы становится равной высоте экрана и появляется вертикальная прокрутка, если размер не ставить, то высота выравнивается по содержимому таблицы</td></tr></table> 

</td></tr> 

</table> 

</body> 

</html>

Fearful добавил 19.02.2010 в 02:33

Вот только непонятно зачем вам в таблице, еще две таблицы.

77

sanich_

20 февраля 2010, 06:31

#3

Fearful:
Простое решение


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

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

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

<title>Документ Без Имени</title> 

</head> 

<body> 

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100%"> 

<tr height="100"><td> 

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100"><tr><td>верхняя таблица с  фиксированной высотой 100pix</td></tr></table> 

</td></tr><tr><td>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100%"><tr><td>нижняя таблица, нужно чтобы ее высота была до низа, если поставить высоту 100%, то высота таблицы становится равной высоте экрана и появляется вертикальная прокрутка, если размер не ставить, то высота выравнивается по содержимому таблицы</td></tr></table> 

</td></tr> 

</table> 

</body> 

</html>

Fearful добавил 19.02.2010 в 02:33
Вот только непонятно зачем вам в таблице, еще две таблицы.

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

sanich_ добавил 20.02.2010 в 09:33

kil:
Вот. Работает в IE6, FF3.5.7, OPERA10. В IE7 не проверял, но думаю, работать будет.


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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Документ Без Имени</title>

</head>

<body>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100%">

<tr><td>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100" style="position: relative;"><tr><td>верхняя таблица с  фиксированной высотой 100pix</td></tr></table>

<table cellpadding="0" cellspacing="0" border="1" width="100%" height="100%" style="padding-top: 100px; margin-top: -100px;"><tr><td>нижняя таблица, нужно чтобы ее высота была до низа, если поставить высоту 100%, то высота таблицы становится равной высоте экрана и появляется вертикальная прокрутка, если размер не ставить, то высота выравнивается по содержимому таблицы</td></tr></table>

</td></tr>

</table>

</body>

</html>

Итак, чтобы компенсировать высоту верхней таблицы:

padding-top: 100px; margin-top: -100px;

Чтобы верхняя таблица не перекрывалась нижней (т.е. чтобы она была выше):

position: relative;

И вообще советую уделить внимание css. Без этого сверстать что-нибудь приличное не удастся. :)

Не знаю как на счет самого простого варианта, но это то что я хотел видеть, причем кроссбраузерно работает! Спасибо

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

27

frantic

20 февраля 2010, 17:56

#4

если я скажу что верстайте лучше дивами, вы ведь не послушаете да :)

72

DeveloperRu

20 февраля 2010, 19:13

#5

frantic:
если я скажу что верстайте лучше дивами, вы ведь не послушаете да :)

почему лучше ?

имхо, лучше для крутых спецов верстки, новичка ждет неудача

Ответы на вопросы (http://telenok.com)

27

frantic

20 февраля 2010, 19:49

#6

DeveloperRu:
почему лучше ?

имхо, лучше для крутых спецов верстки, новичка ждет неудача

а по мне так между табличной верстой и версткой дивами нет ничего общего, поэтому все равно придется рано или поздно начинать

R

43

Reverse

21 февраля 2010, 12:08

#7

frantic:
а по мне так между табличной верстой и версткой дивами нет ничего общего, поэтому все равно придется рано или поздно начинать

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

Не теряй время с сапой (http://www.sape.ru/r.PmzkTSLtsC.php), обманывать Яндекс бесперспективно. Пользуйся белой раскруткой (http://miralinks.ru/users/registration/from:33429) и не знай проблем.

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

272

Brand from Amber

21 февраля 2010, 13:56

#8

sanich_, Как-то давно решал нечно подобное: http://to.lcc.ru/test/9.htm

Лучший способ понять что-то самому - объяснить это другому.

Яндекс приглашает на образовательный фестиваль «8 БИТ»

Как найти B2B-аудиторию и увеличить количество заявок в 16 раз