Jump to content
  • 0

Банально - резиновый трехколоночный макет одинаковой высоты колонок, но...


Sulpher
 Share

Question

Коллеги, нужно решение или пинок, я и еще один сторонний верстальщик с этим вопросом не справились

Есть макет из трех колонок, левая\правая фиксированной ширины, центральная соответственно резина, сам сайт резиновый по ширине экрана

Нужно сверстать блоками, левая\правая колонки имеют фоновую заливку в соответствии с макетом дизайна и все три колонки должны быть одной высоты по самому заполненному блоку

background:  url("../images/bg_module.gif") repeat-y;

Все инструкции что я встречал по данной ситуации говорят делать через отрицательный margin и

border-left: 200px solid #FFF2BF; /* фон левого сайдбара */

Но меня это соответственно не устраивает, поскольку нужна фоновая картинка

Так как на сайте подключен Jquery для всего прочего решил использовать его для эмуляции

function setEqualHeight(columns)
{
var tallestcolumn = 0;
columns.each(
function()
{
currentHeight = $(this).height();
if(currentHeight > tallestcolumn)
{
tallestcolumn = currentHeight;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($("#tpl_container > div.column"));
});

Мозилла, Опера, Сафари, ИЕ7-8 - все прекрасно это дело понимают, но вот в ИЕ6 левая колонка с периодичностью 8 из 10 при обновлении страницы улетает вправо или вообще в никуда, при этом бывает при прокрутке страницы вниз она появляется. Убираю setEqualHeight из шаблона - в ИЕ все хорошо становится (ну за исключением что одинаковая высота пропадает)

Без ИЕ6 никуда (специфика сайта не позволяет), 2 дня гуглю - ничего порядочного не находится

Потому прошу монстров верстки подсказать - есть ли такой баг с setEqualHeight&&Ие6 и\или показать рабочий макет страницы по указанным требованиям (резиновая страница, три колонки, все одинаковой высоты, правая\левая имеют фоновую заливку repeat-y)

Можно, конечно, сделать хак и для ИЕ6 отдавать не одну высоту а разные, но это не решение

Особо хорошим людям дам логин\пароль к работающему в сети макету текущего сайта :lol:

Заранее признателен.

Решение найдено. Тему можно закрывать.

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Решение найдено. Тему можно закрывать.

ЭЙ, А РАССКАЗАТЬ???

Без скрипта (а так же жесткого height и таблиц, ес-но) никак не сделать колонки одинаковой высоты?

Сегодня пытался побороть такое - несколько колонок с декоративной полоской по правому краю (бордер-райт). Если колонки неравномерно заполнены контентом, то и декоративная полоска нужной длинны только у самого длинного блока :unsure:

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