Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Высота div блока

Автор: EDuard 14.3.2006, 21:13

Привет.
Есть двухколончатая таблица. В каждой колонке див блок. Нужно что бы при увеличении высоты одного, высота второго приобретала тот же размер. Если выставляю колонкам таблицы Height: 100% то в IE и FireFox все отлично, но в опере не работает! smile

Как можно решить эту проблему?

Автор: Illuminaty 14.3.2006, 21:15

а выставить div'ам height:100% не помогает?

Автор: EDuard 14.3.2006, 21:17

Illuminaty, нет к сожалению smile

Автор: Illuminaty 14.3.2006, 21:21

Выложи кода кусок лучше. Так легче будет разобраться в проблеме

Автор: EDuard 14.3.2006, 21:25

В архиве html и css.

Код


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="1.css" type="text/css">
</head>
<body>
<div id="head">HEAD</div>
<table cellpadding="0" cellspacing="0" id="table">
  <tr> 
    <td width="50%" height="100%"><div id="leftcolumn">LEFT sdfg sdfg dsfg dfsg dsfg dfsg sdfg 
        dfs fsdg sdfg sdfg dsfg fdg dsfg dfs sdgsd sdfg sdf gdfgds sdfg dsg dsf 
        gdsfg dsf dsf dfgsdf gdsfgdfsgdfsgsdf gdfs</div></td>
    <td width="50%" height="100%"><div id="rightcolumn">RIGHT </div></td>
  </tr>
</table>
<div id="footer">FOOTER</div>
</body>
</html>

Код


body{
font: 13px Tahoma, Verdana; color: #333333;
margin: 0;
padding: 2px 35px 0 35px; 
background-color: #999999;
}
table{
text-align: left;
text-align: top;
}
#table{
border: 0;
width: 100%;
margin: 2px 0 2px 0;
}
/* HEAD */
#head{
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
}
/* LEFTCOLUMN */
#leftcolumn{
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
margin-right: 1px;
height: 100%;
}
/* RIGHTCOLUMN */
#rightcolumn{
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
margin-left: 1px;
height: 100%;
}
/* FOOTER */
#footer{
clear: both;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
}

Автор: EDuard 15.3.2006, 18:08

Совсем отчаялся. Решил вместо дивов вставить таблицы, но в итоге все вышло тоже самое в ie и лисе нормально, а в опере караул! по высоте не вытягивается ни в какую. smile

Никто не сталкивался с такой проблемой?

Автор: EDuard 15.3.2006, 19:13

Все гениальное просто!
Так же оказалось и в этот раз.
Нужно выставить блокам правила:

Код



/* LEFTCOLUMN */
#leftcolumn{
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
margin-right: 1px;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/* RIGHTCOLUMN */
#rightcolumn{
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
margin-left: 1px;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

а таблице

Код


table{
text-align: left;
text-align: top;
overflow: hidden;
}

И вуаля в IE, FireFox и Opera все пашет.

P.S. ответ подсказали на другом форуме в виде ссылки на http://www.positioniseverything.net/articles/onetruelayout/equalheight.