Jump to content
  • 0

как растянуть элемент по высоте родителя?

Denni

Asked by Denni,

 Share

Question

Denni Explorer

Denni

Posted
Posted

верстаю страницу табличной версткой и столкнулся с проблемой. В ячейку <td id="wrap" colspan="2" rowspan="2"> не могу вставить таблицу или див, так, что бы она (он) занимал всю высоту родителя (#wrap). http://jsfiddle.net/dennila2/Lt3L0jw6/

Объясните пожалуйста, как это сделать?

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0
boond Explorer

boond

Posted
Posted (edited)

Чтобы div занимал всю высоту, нужно ему дать height:100%, это же не проблема?

С таблицей сложнее. Делаешь самую первую ячейку в таблице с width:0 и rowspan=N

и в нее вставляешь картинку c width:0;  height:500px или сколько там тебе надо.

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

Q4Dizzy

Posted
Posted (edited)
Чтобы div занимал всю высоту, нужно ему дать height:100%, это же не проблема?

 

 

 

 

При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента.

 

задавая диву высоту 100% не будет результата. У родителя она тоже не указана. Тут или позиционировать надо (а позиционирование с таблицами не особо хороший вариант) или скриптом делать.

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

boond

Posted
Posted (edited)

можно и задать, почему нет?

<table border='1' style='height:100%;'>

<td style='height:100%;..............

проверил в IE и FF, а вот тут

http://jsfiddle.net/boond/2ph4k2dh/

первая версия со 100 процентами не растягивает

всю таблицу, как в браузерах, но эффект, требуемый ТС,

присутствует, а если в пикселях - вообще все ок.

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

boond

Posted
Posted

В браузерах работает jsfiddle.

А уж в jsfiddle работают примеры.

Это разные вещи. Предполагаю, что понятия документа, body, doctype там отличаются

от привычных нам. Там некая абстрактная среда исполнения. Но это мои фантазии.

Link to comment
Share on other sites
  • 0
Denni Explorer

Denni

Posted
  • Author
Posted

 

первая версия со 100 процентами не растягивает всю таблицу, как в браузерах

 

А jsfiddle разве не в браузерах работает? Может, имелось в виду "как без доктайпа"? ;)

 

Наверное имеется в виду, что моя первая версия на фидле не работает, т.к. в стилях небыло 

table {height: 100%;}
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
Предполагаю, что понятия документа, body, doctype там отличаются от привычных нам. Там некая абстрактная среда исполнения.
 

Это не соответствует действительности. В основе jsfiddle — банальный iframe, в котором отображается обычная html-страница с <!DOCTYPE html>, в которую в <style>, <script> и <body> соответственно динамически подставлен код из соотв. панелей редактора. Это легко увидеть по F12.

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