Jump to content
  • 0

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

viod

Asked by viod,

 Share

Question

viod Explorer

viod

Posted
Posted

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

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

<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 таблицы не предопределена?

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

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0
s0rr0w Explorer

s0rr0w

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
viod Explorer

viod

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

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

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

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

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

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
viod Explorer

viod

Posted
  • Author
Posted

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

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

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

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

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
viod Explorer

viod

Posted
  • Author
Posted (edited)

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

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

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

Edited by viod
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

это не то?

<!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>

Link to comment
Share on other sites
  • 0
viod Explorer

viod

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

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

  psywalker said:
это не то?

Нет, смотрите, я добавил во вторую таблицу, которая 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>

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

Нет, смотрите, я добавил во вторую таблицу, которая 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>

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

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

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

<!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>

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

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

Edited by mishka2
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

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

Link to comment
Share on other sites
  • 0
viod Explorer

viod

Posted
  • Author
Posted

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

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

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

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

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

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

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

Спасибо.

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
Posted (edited)

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

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

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

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

Edited by gesandte
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept