2 таблицы, одна position:absolute, нужно уровнять высоту

viod · October 2, 2009

Здравствуйте.

Вот такая вот система:

<table style="height:100%; background-color:#c70000" border="1">
<tr>
  <td height="100%"> </td>
</tr>
</table>

<table style="position:absolute; top:0; left:0" border="1">
<tr>
  <td height="2000px">content</td>
</tr>
</table>

Первая таблица играет роль фона, но но растягивается только на высоту экрана без скролла потому, что вторая таблица, которая и вызвала появление скролла имеет position:absolute

Есть идеи как растянуть первую таблицу, не используя javascript и с учетом, что высота второ1 таблицы не предопределена?

Заранее спасибо.

s0rr0w · October 2, 2009

Есть идеи как растянуть первую таблицу, не используя javascript и с учетом, что высота второ1 таблицы не предопределена?
Заранее спасибо.

Нет идей. Потому что цель непонятна.

viod · October 3, 2009

Ну первая таблица - это фон. У его есть верхняя картина и нижняя, а посередине ячейка должна растягиваться. А вторая таблица содержит контент.

psywalker · October 3, 2009

Ну первая таблица - это фон. У его есть верхняя картина и нижняя, а посередине ячейка должна растягиваться. А вторая таблица содержит контент.

Приведи скрин того, что должно получиться в итоге и с подробным объяснением!

viod · October 3, 2009

Приведи скрин того, что должно получиться в итоге и с подробным объяснением!

Таблица А содержит три строки. В первой и последней строке расположены изображения: голова и ноги сайта. Средняя строка имеет height:100%, чтобы таблица растягивалась на весь экран.

Таблица Б содержит контент, который ее растягивает. Таблица Б имеет position:absolute; top:0; left:0.

В результате получается, что таблица Б накладывается на таблицу А, составляя общую картину страницы. Содержимое таблицы Б может меняться. Таким образом если контента много, то таблица Б вызывает появление скролла, а таблица А растягивается только в один экран.

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

gesandte · October 3, 2009

Таблица А содержит три строки. В первой и последней строке расположены изображения: голова и ноги сайта. Средняя строка имеет height:100%.
Таблица Б содержит контент, который ее растягивает. Таблица Б имеет position:absolute; top:0; left:0.
В результате получается, что таблица Б накладывается на таблицу А, составляя общую картину страницы.

Вообще не понятен смысл кода. Вы накладываете слой Б на слой А с нулевыми координатами, получается что контент этого блока накрывает и хеадер......бред

Если вы хотите чтобы высота центрального блока зависила от содержимого Б, то Б над помещать в А.

А вооще, как сказал psywalker, выкладывайте изображение того, что хотите получить

viod · October 3, 2009

Чего непонятного!? Причем тут перекрывающийся header!? Я вам не привожу часть своего кода (потому, что это было бы глупо без файлов изображений), я демонстрирую аналогию кода. У первой таблицы высота 100%, она не отрисовывается во всю страницу, так как браузер не принимает во внимание, то что документ растянут второй таблицей, потому что у последней свойство position равно absolute.

Я задаю конкретный вопрос: можно ли каким-то образом, не используя javaScript, сделать, чтобы первая таблица заполняла всю высоту страницы. Вставьте код в блокнот, сохраните в файл, откройте в браузере. Все наглядно!

При всем уважении, вопрос "зачем вам это нужно" - абсолютно не корректен. Это может понадобиться тысячам людей просматривающим форум и каждому для своей цели.

Я не спрашиваю вас "как же мне блин сверстать такой сложный шаблон, да еще и в такой короткий срок", а предлагаю изложить свои рассуждения по конкретному вопросу, который может вообще не иметь отношения к практике. Если бы я просил помочь найти КАКОЕ-НИБУДЬ решение, то написал бы и код и сделал скрин и дал бы ссылку

gesandte · October 3, 2009

Очень умый? Что значит "чтобы первая таблица заполняла всю высоту страницы"?

Если под этим понимается растяжение в зависимости от содержимого Б, то внимательней читай мой преведущий пост, если под этим понимается высота окна, то надо отпозиционировать так же А.

viod · October 3, 2009

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

И что я должен сделать? Засунуть таблицу с position:absolute в таблицу с position:static.

Модераторы, закройте тему, пожалуйста. Надоело смешить народ. Ресурс такой приличный, а форум - флудильня.

Edited October 3, 2009 by viod

gesandte · October 3, 2009

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

Edited October 3, 2009 by gesandte

psywalker · October 3, 2009

это не то?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<style type='text/css'>
	* { margin: 0;}
	body,html { height: 100%;}

</style>
</head>
<body>
<table style="height:100%; background-color:#c70000" border="1">
<tr>
<td style="height: 100%;">
ghdg
</td>
</tr>
</table>

<table style="position:absolute; top:0; left:0;" border="1">
<tr>
<td>content</td>
</tr>
</table>
</body>
</html>

viod · October 4, 2009

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

С тобой все ясно. Не знаешь как - прекрати гадить в тему.

это не то?

Нет, смотрите, я добавил во вторую таблицу, которая absolute, дофига контента:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<style type='text/css'>
    * { margin: 0;}
    body,html { height: 100%;}

</style>
</head>
<body>
<table style="height:100%; background-color:#c70000" border="1">
<tr>
<td style="height: 100%;">
ghdg
</td>
</tr>
</table>

<table style="position:absolute; top:0; left:0;" border="1">
<tr>
<td>content
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</td>
</tr>
</table>
</body>
</html>

При этом таблица где дофига контента растянулась по высоте, а та которая должна растянуться вслед за ней - осталась на месте.

psywalker · October 4, 2009

С тобой все ясно. Не знаешь как - прекрати гадить в тему.
Нет, смотрите, я добавил во вторую таблицу, которая absolute, дофига контента:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<style type='text/css'>
 * { margin: 0;}
 body,html { height: 100%;}

</style>
</head>
<body>
<table style="height:100%; background-color:#c70000" border="1">
<tr>
<td style="height: 100%;">
ghdg
</td>
</tr>
</table>

<table style="position:absolute; top:0; left:0;" border="1">
<tr>
<td>content
 
 
 
 
 
</td>
</tr>
</table>
</body>
</html>
При этом таблица где дофига контента растянулась по высоте, а та которая должна растянуться вслед за ней - осталась на месте.

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

Я бы сделал всё в одной таблице:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv='content-type' content='text/html; charset=windows-1251' />
<style type='text/css'>
* { margin: 0;}
body,html { height: 100%;}

</style>
</head>
<body>

<table style=" height: 100%; background-color:#c70000" border="1">
<tr>
<td style="height: 100%;">
ghdg
</td>
</tr>
<tr>
<td>content
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</td>
</tr>
</table>



</body>
</html>

mishka · October 4, 2009

Прислал бы принтскрин, давно уже получил бы ответ. Если покопать в сторону background-attachment:fixed; может что получится. Но реально без принт скрина очень тяжело играть в угадайки.

Edited October 4, 2009 by mishka2

psywalker · October 4, 2009

Прислал бы принтскрин, давно уже получил бы ответ. Если покопать в сторону background-attachment:fixed; может что получится. Но реально без принт скрина очень тяжело играть в угадайки.

Да я ему тоже самое говорил уже давно, может там задача, которую можно Дивами решить 5 секунд, а он не понимает

gesandte · October 4, 2009

А почему это ты так полагаешь, что первая таблица должна тянуться за другой?
Я бы сделал всё в одной таблице

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

Да я ему тоже самое говорил уже давно, может там задача, которую можно Дивами решить 5 секунд, а он не понимает

по моему ему надо вот это,

http://www.psywalker.ru/Forum/opacity/main-2.html

mishka · October 4, 2009

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

viod · October 4, 2009

Ребят, вы просто понять не хотите

Без обид, спасибо, что пытаетесь помочь, но хватит.

Дело то не в том, чтобы сделать макет, а в том чтобы решить проблему. Проблема сформулирована, решение может понадобиться в будущем мне или еще кому-то.

Макет страницы я сделал через 5 минут после того как задал вопрос, сделал, как вы и говорите, другим способом. Ничего сверхъестественного в нем нет. Просто был задан вопрос, конкретно и с примером кода. Просто некоторые люди настолько пытаются помочь, что не зная ответ на конкретный вопрос, пытаются найти в этом вопросе что-то более простое, на что ответ знают.

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

Единственный кто это сделал - psywalker, "А почему это ты так полагаешь, что первая таблица должна тянуться за другой? Считаю, что у этой задачи нет решения, по крайней мере я его не зна". Оно и понятно, посмотрите на уровень его знаний и профессионализма... Он не вы...ся как некоторые называя чужие вопросы бредом.

К слову "А почему это ты так полагаешь, что первая таблица должна тянуться за другой?", я как раз не полагаю, а хотел бы. Поэтому и спрашиваю есть ли решение для этого

Спасибо.

gesandte · October 4, 2009

................................................................................

.................................................................................

...................................

Edited October 4, 2009 by gesandte

mishka · October 4, 2009

ну что тут сказать... psywalker, ты бог.

Edited October 4, 2009 by mishka2

psywalker · October 4, 2009

ну что тут сказать... psywalker, ты бог.

Бог и основатель CSS в России

Sign In

2 таблицы, одна position:absolute, нужно уровнять высоту

Question

Link to comment

Share on other sites

20 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information