div растянуть на высоту ячейки таблицы

bodnar · January 24, 2010

Вобщем в каждой ячейке таблицы лежит по div(в некоторых может лежать два). Никак не получается растянуть div по высоте во всю ячейку. есть только вот так:

div имеет красный фон для наглядности

height: 100% не дает нужного эфекта

Justnewone · January 24, 2010

Вобщем в каждой ячейке таблицы лежит по div(в некоторых может лежать два). Никак не получается растянуть div по высоте во всю ячейку. есть только вот так:
div имеет красный фон для наглядности
height: 100% не дает нужного эфекта

по всей цепочке должна быть указана высота родителя: ячейки, таблицы, а может и далее, если в %.

bodnar · January 24, 2010

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

<html>
   <head>
   <link rel="stylesheet" type="text/css" href="main2.css" />
   </head>
   <body>
   <table border=1 width=100% CELLSPACING ="0">
   <tr height="10">
   <td><div class="myclass">1</div></td>
   <td><div class="myclass">2</div></td>
   </tr>

   <tr height="10">
   <td><div class="myclass">3</div></td>
   <td><div class="myclass">4</div></td>
   </tr>

   <tr height="10">
   <td><div class="myclass">5</div></td>
   <td><div class="myclass">здесь
	много
	текста
   очень много 
   </div></td>
   </tr>
   </table>
   </body>
   </html>

css

.myclass{
 height: 100%;
 background-color: red;
 }

добавляем доктайп все перестает работать

кстати в хроме и без доктайпа не работает

Edited January 24, 2010 by bodnar

Yahoo! · January 24, 2010

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

psywalker · January 24, 2010

ТС, уже сказали, всем родителям высоту 100%

bodnar · January 24, 2010

Ааа, то есть так?

 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="main2.css" />
 </head>
 <body>
 <table border=1 width="100%" CELLSPACING ="0" height="100%">
 <tr height="100%">
 <td><div class="myclass" height="100%">1</div></td>
 <td><div class="myclass" height="100%">2</div></td>
 </tr>

 <tr height="100%">
 <td><div class="myclass" height="100%">3</div></td>
 <td><div class="myclass" height="100%">4</div></td>
 </tr>

 <tr height="100%">
 <td><div class="myclass" height="100%">5</div></td>
 <td><div class="myclass" height="100%">здесь
  много
  текста
 </div></td>
 </tr>
 </table>
 </body>
 </html>

C доктайпом FF и crome показывают нормально, а opera и ie показывает так как на первом скриншоте

psywalker · January 24, 2010

Ааа, то есть так?

 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="main2.css" />
 </head>
 <body>
 <table border=1 width="100%" CELLSPACING ="0" height="100%">
 <tr height="100%">
 <td><div class="myclass" height="100%">1</div></td>
 <td><div class="myclass" height="100%">2</div></td>
 </tr>

 <tr height="100%">
 <td><div class="myclass" height="100%">3</div></td>
 <td><div class="myclass" height="100%">4</div></td>
 </tr>

 <tr height="100%">
 <td><div class="myclass" height="100%">5</div></td>
 <td><div class="myclass" height="100%">здесь
  много
  текста
 </div></td>
 </tr>
 </table>
 </body>
 </html>

C доктайпом FF и crome показывают нормально, а opera и ie показывает так как на первом скриншоте

А разве у таблицы НЕТ родителей?

bodnar · January 24, 2010

хмм, добавил height="100%" в body и html

родители вроде закончились, а ситуация не изменилась(

psywalker · January 24, 2010

хмм, добавил height="100%" в body и html
родители вроде закончились, а ситуация не изменилась(

А что ты хочешь получить?

bodnar · January 24, 2010

чтобы div заполнил собой всю ячейку. С вашими советами это получилось в ff и crome, а вот в ie и opere не вышло, другие браузеры не проверял

psywalker · January 24, 2010

1) Поставь доктайп!

2) Все стили вынеси в ЦСС

bodnar · January 24, 2010

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="main2.css" />
 </head>
 <body>
 <table cellspacing="0" border="1">
 <tr>
 <td><div class="myclass">1</div></td>
 <td><div class="myclass">2</div></td>
 </tr>

 <tr>
 <td><div class="myclass">3</div></td>
 <td><div class="myclass">4</div></td>
 </tr>

 <tr>
 <td><div class="myclass">5</div></td>
 <td><div class="myclass">здесь
  много
  текста
 </div></td>
 </tr>
 </table>
 </body>
 </html>

 .myclass{
 height: 100%;
 background-color: red;
 }
 html body table td tr {
 height: 100%;
 }
 table{
 width:100%;
 }

пожалуйста, те же яйца вид сбоку)) как в двух браузерах не работало так и не работает

psywalker · January 24, 2010

html body table td tr {
height: 100%;
}

Это что такое?

bodnar · January 24, 2010

Это что такое?

там запитульки должны бтыь, пропустил

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

psywalker · January 24, 2010

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

Вот тут уже нужно взять допустим три строки, и каждой ячейке в них задать высоту по 33% например. Либо верхней и нижней по 10%, а середине 80%

Svatov · April 5, 2012

Народ, а ничего нового не придумали? Вложенность просто огромная...всем родителям height=100% ну никак...javascript? :unsure:

SelenIT · April 5, 2012

Придумали! "Если несколькими частностями пренебречь..."

Svatov · April 5, 2012

Ох и простыня Осилил, только вот с ИЕ9 у меня как раз и проблемы :angry: Не могу пренебречь...сетка продуктов...

П.с SelenIT веб-маньяк :lol:

Edited April 5, 2012 by Svatov

Sign In

div растянуть на высоту ячейки таблицы

Question

Link to comment

Share on other sites

17 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

Join the conversation

Обсуждения

Important Information