высота ячейки при 100% hieght таблицы в IE

paShaman · February 28, 2008

есть талица, которая растянута на 100% по высоте

в ней 3 строки: верхняя и нижняя с фиксированной высотой, средняя все остальное место.

вот я не понимаю почему, но ие (7..в 6 не проверял, но думаю тоже самое) не смотря на фиксированную высоту всеравно растягивает эти ячейки по высоте.

<table class="table">
 <tr>
 <td colspan="2" class="up"></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td height="90"></td>
 <td height="90"></td>
 </tr>
</table>

html, body{
 margin:0;
 padding:0;
 height:100%;
}
.table{
 height:100%;
}
.up{
 height:224px;
}

* код сократил..смысла смотреть остальное нет.

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

homm · February 29, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style>
html, body{
 margin:0;
 padding:0;
 height:100%;
}
.table{
 height:100%;
}
.up{
 height:224px;
}
.footer {
 height: 90px;
}
</style>
<table class="table" width=100%>
 <tr>
 <td valign=top>
 <table border=1 width=100%>
 <tr><td colspan=2 class=up>Header</td></tr>
 <tr><td>Content</td><td>Content</td></tr>
 </table>
 </td>
 </tr>
 <tr>
 <td valign=bottom>
 <table class=footer border=1 width=100%>
 <tr><td>footer</td><td>footer</td></tr>
 </table>
 </td>
 </tr>
</table>

PS. На дивах все было бы намного проще.

paShaman · February 29, 2008

ну так то да...в варианте от homm таблиц уж многовато.

а не используя кучу таблиц нельзя это реалиовать? или проще на дивы перевести?

homm · February 29, 2008

ну так то да...в варианте от homm таблиц уж многовато.
а не используя кучу таблиц нельзя это реалиовать? или проще на дивы перевести?

Вот пример на дивах:

http://mcm69.org/

paShaman · February 29, 2008

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

вот что на дивах получилось:

<div id="all">
 <div id="header"> </div>
 <div id="menu"> </div>
 <div id="main"> </div>
 <div id="bottom"> </div>
 <div id="bottom1"> </div>
</div>

#all{
 position:relative;
 width:1006px;
 height:100%;
 margin:auto;
}
#header{
 position:absolute;
 top:0;
 left:0;
}
#bottom{
 position:absolute;
 bottom:0;
 left:125px;
}
#bottom1{
 position:absolute;
 bottom:25px;
 left:355px;
 width:250px;
}
#main{
 position:absolute;
 left:303px;
 top:224px;
}
#menu{
 position:absolute;
 top:224px;
 left:50px;
}

homm · February 29, 2008

вот что на дивах получилось:

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

homm · February 29, 2008

создавание кучи таблиц за исправление бага не считаю))

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

paShaman · February 29, 2008

вот что на дивах получилось:
Ужас то какой. Это что, называется верстка? Я же дал тебе ссылку откуда можно посмотреть как нормально сверстать такое на дивах.

а что тут страшного то?

один общий див и несколько внутренних которые раскиданы абсолютами относительно отцентрованного..что не так то?

homm · February 29, 2008

а что тут страшного то?
один общий див и несколько внутренних которые раскиданы абсолютами относительно отцентрованного..что не так то?

Все не так. Футер всегда виден и скролится вверх, когда содержимое не влазит в окошко.

paShaman · March 1, 2008

нда..заметил...не привык просто к маленьким разрешениям экрана....

уже пол дня смотрю на тот сайт) и всеравно ниче не получается)))

видимо оставлю на таблицах...

homm · March 1, 2008

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

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

paShaman · March 1, 2008

ну я имел ввиду сайт в целом..css тоже

paShaman · March 1, 2008

щас уж вроде все точно норм (во всех браузерах все замечательно)

понравилась идея с footer_cleaner, возьмем на вооружение

<div id="page">
 <div id="header">
 </div>
 <div id="menu">
 </div>
 <div id="content">
 </div>
<div id="footer_cleaner"></div>
</div>
<div id="footer">
 <div id="niz">
 </div>
 <div id="niz1">
 </div>
</div>

html, body{
 margin:0;
 padding:0;
 height:100%;
}
#page {
 min-height: 100%;
 width:1006px;
 margin: 0 auto -90px auto;
}
#header
{
 height: 224px;
 float:left;
}
#footer_cleaner {
 height: 90px;
 clear: both;
}
#footer {
 height: 90px;
 margin: 0 auto 0px auto;
 width:1006px;
 font-size:10px;
}
#niz {
 margin-left:127px;
 float:left;
 width:233px;
}
#niz1 {
 margin-left:360px;
 height:40px;
}
#menu{
 float:left;
 width:253px;
 margin-left:50px;
}
#content{
 margin-left:303px;
}

homm · March 2, 2008

щас уж вроде все точно норм (во всех браузерах все замечательно)

Прямо не смотря в браузерах: в ИЕ6 футер не прилипает к низу. Смотри CSS еще внимательнее. (подсказка: * html #page)

paShaman · March 3, 2008

именно в 6?

у меня дома 6 нет...лан на работе гляну

homm · March 4, 2008

именно в 6?
у меня дома 6 нет...лан на работе гляну

И ты сммешь утверждать, что ?во всех браузерах все замечательно? не проверив в шестом эксплорере?

paShaman · March 4, 2008

ну у меня его дома нет) отдельно для проверки мне его ставить влом)

Sign In

высота ячейки при 100% hieght таблицы в IE

Question

Link to comment

Share on other sites

16 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

Join the conversation

Обсуждения

Important Information