Jump to content
  • 0

Растянуть фрейм/див/картинку/etc на всё незанятое пространство родительской ячейки - как?

Postscripter

Asked by Postscripter,

 Share

Question

Postscripter Explorer

Postscripter

Posted
Posted (edited)

Доброго времени суток! Вроде бы простая задача... Может, я что-то не так объясняю, или гуру вёрстки обходят стороной такие пустяковые темы... Но я уже на трёх форумах побывал, и нигде никто не смог дать ответ. А вопрос в следующем:

Есть табличка на две колонки. В левой - меню, а под меню - iframe (с котёнком). В правой - как обычно - контент.

Как сделать так, чтобы таблица растягивалась за счёт контента, а фрейм занимал всё оставшееся свободное пространство под меню?

На скриншоте слева - то, чего я хочу добиться. Собственно, для Оперы - уже добился, работает. Установил фрейму высоту в 100% и overflow hidden для ячейки. Однако это решение НЕ работает в хроме (скриншот справа). Да и вообще, мне мой код кажется неправильным... Поэтому вопрос скорее - не "где тут ошибка", а "как правильно сделать?"

f49dd43bb6de.jpg


<!DOCTYPE html>

<html>


<body>

<table width="100%" border="1">
<tr style="overflow:hidden; vertical-align:top;">

<!--Левая колонка-->
<td style="overflow:hidden; width:120px; height:100%;">
<div style="background:lime;">
<BR><BR>1<BR>2<BR>3<BR>4<BR><BR>
</div>
<iframe style="width:120px; height:100%;" scrolling="no" src="http://clck.ru/8aOPk" ></iframe>
</td>

<!--Правая колонка-->
<td>
<div style="background:yellow; height:100%;">
<BR>—<BR>-к-<BR>-о-<BR>-н-<BR>-т-<BR>-е-<BR>-н-<BR>-т-<BR>—<BR><BR>
</div>
</td>

</tr>
</table>

</body></html>

Edited by Postscripter
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Березовский Explorer

Березовский

Posted
Posted

Это даже стало интересным) угрохал час)) никак не могу добраться до img в iframe.... вообще код в порядке, я вставлял вместо iframe - img и все путем, только там один div лишний </iframe></div> -- этот. и размер iframe лучше такой style="width: 100%; height: auto;" на скрине маячит iframe и img как видишь с img проблем нет совсем... все дело во фрейме.. а зачем тебе выводить во фрейме изображение?

смотри скрин - http://prntscr.com/twgmd

Link to comment
Share on other sites
  • 0
Postscripter Explorer

Postscripter

Posted
  • Author
Posted (edited)

Не-не-не, изображение - только для примера! ) На самом деле во фрейме будет контент большого размера, его не нужно трогать. Нужно только спозиционировать сам фрейм (или заменить фрейм дивом, не суть). Вот на вашем скриншоте справа большое белое поле - как раз от него я и пытаюсь избавиться, то есть поднять нижнюю границу впритык к жёлтому. Фрейм при этом должен уменьшиться, либо обрезаться, а что произойдёт внутри него - это уже неважно...

Edited by Postscripter
Link to comment
Share on other sites
  • 0
Березовский Explorer

Березовский

Posted
Posted (edited)

Не-не-не, изображение - только для примера! ) На самом деле во фрейме будет контент большого размера, его не нужно трогать. Нужно только спозиционировать сам фрейм (или заменить фрейм дивом, не суть). Вот на вашем скриншоте справа большое белое поле - как раз от него я и пытаюсь избавиться, то есть поднять нижнюю границу впритык к жёлтому. Фрейм при этом должен уменьшиться, либо обрезаться, а что произойдёт внутри него - это уже неважно...

Шоб ты был здоров!!!))) я с этим изображением час морочался))))))

Не-не-не, изображение - только для примера! ) На самом деле во фрейме будет контент большого размера, его не нужно трогать. Нужно только спозиционировать сам фрейм (или заменить фрейм дивом, не суть). Вот на вашем скриншоте справа большое белое поле - как раз от него я и пытаюсь избавиться, то есть поднять нижнюю границу впритык к жёлтому. Фрейм при этом должен уменьшиться, либо обрезаться, а что произойдёт внутри него - это уже неважно...

держи) убери из колонки div...


<!--Правая колонка-->
<td style="background:yellow; height:100%;">
<BR>—<BR>-к-<BR>-о-<BR>-н-<BR>-т-<BR>-е-<BR>-н-<BR>-т-<BR>—<BR><BR>
</td>

да и сам iframe лучше внутрь дива левой колонки всунуть. чего ему снаружи делать...

Edited by Березовский
Link to comment
Share on other sites
  • 0
Postscripter Explorer

Postscripter

Posted
  • Author
Posted (edited)

Шоб ты был здоров!!!)))

:blush:

держи) убери из колонки div...

То же самое, только теперь труднее определить границу между контентом (он был жёлтым) и незанятым пространством (белое).

072e1c6378bc.jpg

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

Postscripter

Posted
  • Author
Posted (edited)

Этот код сейчас правильно работает в Опере (левый скриншот). Хочется, чтобы также было и в Хроме, но хром подрисовывает белую полосу снизу (правый скриншот), тем самым таблица растягивается вниз на целых два сантиметра... ужас)) А нужно, чтобы табличка заканчивалась, как только заканчивается контент в ней. Чтобы фрейм её не растягивал.

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

Postscripter

Posted
  • Author
Posted

b6d94ccb011f.jpg

Во! Сделал див absolute, теперь таблице на него откровенно наплевать, он сам по себе))

Правда, потом пришлось добавить position:relative к ячейке, чтобы работало overflow: hidden

И обернуть абсолютный фрейм относительным (relative) дивом, чтобы это работало в FF

И добавить доктайп, чтобы это работало в IE )))

И пройтись автозаменой по всем страницам, исправляя вскрывшиеся из-за смены доктайпа проблемы :wacko:


<!DOCTYPE html>
<html><body>

<table style="width:100%;" border="1">
<tr style="vertical-align:top;">

<!--Левая колонка-->
<td style="width:120px; overflow:hidden; position:relative;">
<div style="background:lime;">
<BR><BR>1<BR>2<BR>3<BR>4<BR><BR>
</div>
<div style="position:relative;">
<iframe style="width:120px; height:7000px; position:absolute;" scrolling="no" src="http://clck.ru/8aOPk"></iframe>
</div>
</td>

<!--Правая колонка-->
<td>
<div style="background:yellow">
<BR>—<BR>-к-<BR>-о-<BR>-н-<BR>-т-<BR>-е-<BR>-н-<BR>-т-<BR>—<BR><BR>
</div>
</td>

</tr>
</table>

</body></html>

На соседнем форуме посоветовали хак с padding-bottom: 20000px и margin-bottom: -20000px; Но чего-то не пошло, поэтому оставил свой вариант. Ура!

Ну и вот, на скриншоте, результат всего этого действа - для чего нужен был резиновый див (див - слева внизу, который с аватарками). Работает чётко. Спасибо за участие :)

d0551af6916f.jpg

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
×
×
  • 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