Jump to content
  • 0

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


paShaman
 Share

Question

есть талица, которая растянута на 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 создан потому что мне только основную таблицу надо растянуть, а не все которые могут быть

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0

<!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. На дивах все было бы намного проще.

Link to comment
Share on other sites

  • 0

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

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

<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;
}

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

  • 0

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

понравилась идея с 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;
}

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

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