“Резиновая” ширина колонок + эмуляция высоты
Крайне редко мне доводится верстать полностью резиновые макеты, т.е. когда требуется “резиновая” ширина не только для самой страницы, но и для всех колонок (как правило, боковые колонки на моей практике бывают фиксированной ширины).
И вот недавно такой случай попался. И это меня немножко поднапрягло =) Пытался искать в Интернете решение похожей задачи, но совсем ничего не нашел.
Задача
- Полная “резина”: и ширины страницы, и ширины 2-х колонок (контент + сайдбар).
- Необходимость эмулировать одинаковую высоту колонок. У сайдбара фон в виде серого цвета. Нужно было сделать так, чтобы серый фон всегда тянулся до футера, независимо от количества содержимого в той или другой колонке.
В моем случае было исключено применение метода padding-bottom: 32767px; margin-bottom: -32767px по той простой причине, что я верстал под WordPress, а там используются ссылки-якори, и, в результате применения данной методики, при переходе по таким ссылкам в ряде браузеров с экрана прячется все, что находится до якоря.
Решение
Единственное, что я смог придумать – создать дополнительный пустой блок, который позиционировать абсолютно, придать ему 100% высоты и поместить под сайдбаром, задав соответствующий фон.
Разметка выглядит следующим образом:
<div id="wrapper">
<div id="column"></div>
<div id="header"></div>
<div id="middle">
<div id="content"></div>
<div id="sidebar"></div>
</div><!-- #middle-->
</div><!-- #wrapper -->
<div id="footer"></div>
Для дополнительного блока #column я написал следующие стили:
#column {
position: absolute;
top: 0;
right: 0;
width: 39%;
height: 100%;
background: #E9E9E9;
}
В результате получилось то, что мне было нужно, за исключением одного момента. IE6 не умеет растягивать блок на 100% высоты родительского блока, если задано свойство position: absolute. Т.е., как обычно, потребовался костыль. И он был вставлен следующим образом:
body {height: 100%}
* html #column {height: 999%}
Я указал высоту блоку #column не 100%, а значительно больше предполагаемой высоты всей страницы. А для того, чтобы в IE6 этот блок растягивался в принципе, потребовалось указать 100% высоту тегу body.
Пример
Результат, того, что у меня вышло.
В итоге остался единственный недочет – в IE6 мне не удалось “спрятать” ту часть блока #column, которая уходит под футер. Единственное решение, которая я вижу в такой ситуации – прижать “подвал” к нижнему краю окна браузера, однако это не всегда бывает необходимо.
P.S. Буду рад услышать от вас более элегантные варианты решения выше описанной задачи, если таковые имеются.
Обновление от 15.02.09
Благодаря помощи Сергея (за что выражаю ему благодарность), удалось довести макет до кроссбраузерного состояния. В вышеуказанном примере потребовалось сделать всего 3 изменения:
- Высоту блока в IE6
#columnнеобходимо указать НЕ в процентах:* html #column {height: 9999em} - Сам блок
#columnнужно перенести в конец контейнера#middle. - Сайдбару
#sidebarуказать параметрz-index, чтобы он был выше слоя#column.
Тему можно считать закрытой. Все свободны =)
Смотрите также
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Эмуляция псевдо-селектора :nth-child() в IE7 и IE8
Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т.е. одна строка, к примеру, с белым фоном, вторая ...
CSS-трюк: IE, таблица и "резиновые" изображения
Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился. Я с этим багом (да, речь пойдет об ...
10 фиксов, решающих проблемы Internet Explorer 6
Данный пост основан на переводе интересной англоязычной статьи “10 Fixes That Solve IE6 Problems“. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...
Комментарии (41)
В закладки, как раз эмуляцию высоты не знал как делать.
То, что легко и триаивально делается таблицами, ага…
Привет! А мой пример можешь “добить”, чтобы получилось, как у тебя? У меня что-то не получается. Хочется увидеть, какие конкретно правила нужно добавить/изменить.
Попробую.
Должно получиться :)
а вот как бы сделать подобную верстку ток трехколоночную со средней резиновой
Спасибо Вам за статью!
>Буду рад услышать от вас более элегантные варианты решения выше описанной задачи, если таковые имеются.
Написал отзыв на вашу статью у себя в блоге, буду рад обратной ссылке.
На счет элегантности зарекаться не буду, но абсолютного позиционирования и строчек вида height: 999% мне удалось избежать.
Пример — http://installero.ru/examples/liquid-columns/
Единственное, чего я так и не смог понять — это кривого поведения при открытии дополнительного текста в сайд-баре в ie6. Но это к верстке отношения (вроде бы) не имеет, если сделать статический код, все работает отлично. Подскажите, если не сложно.
А теперь попробуем сделать min/max-width и эмуляцию оного для IE6 блоку .wrapper, задать background-color или background:url(…) для body
Оптимизма думаю по убавиться :)
Одинаковой высоты колонок, как не бывало :)
А над этим давно бьются :)
И за два часа вам не удалось решить проблему :)
Высказывания на вашей тест-странице сильно позабавили, особенно:
Если бы все было так просто :)
Без обид.
А зачем? Если надо-таки ограничить все это по ширине, заверните в ещё один div и задайте ему max-width.
Вам виднее, конечно ;)
Введение дополнительного контейнера потянет за собой проблему равной высоты колонок при попытке сделать 100% высоту макета, не говоря о том, что проблема с IE6 в вашем примере остается и в контексте поста автора блога, в данном конкретном случае, решения похоже, не имеет.
Вы хотите сказать, что не получится одновременно и ограничить макет по ширине и прижать футер к полу, растянув фон?
А вы попробуйте :)
Про IE6 не забудьте :)
У себя на блоге этому много статей посвятил, как раз решая эту проблему, посмотрите, почитайте.
Повторюсь не все так просто, проблема имеет место быть и ваш пример яркое тому подтверждение.
Для FF3, IE7, Opera — получилось. Для IE6 — не вышло. Все-таки игрушки крепко к полу прибиты :)
Но в совокупности с автором поста у нас полный набор. Я привел пример без прижатия футера к земле. Автор — с прижатием. Оба примера (вроде бы) отлично ограничиваются по ширине и высоте.
Линка на пример не хватает :)
Мои примеры работают везде без проблем и нужен-то всего один лишний блок :)
Причем, если вы видели скриншот по ссылке на статью, что давал в комментарии № 2, то сделать каждой колонке свой border и фон легко и просто, со 100% высотой и footer-ом который всегда внизу :) при минимуме html.
Ну, мне почему-то кажется, что вы это не 2 часа делали.
Около того :)
Пять вариантов с различным раположением колонок навигации относительно области контента.
Линки на примеры в комментариях вариация на тему :)
а вот так не пробовали ?
#middle { zoom:1; position:relative; overflow:hidden; z-index:2; }
#sidebar { position:relative; z-index:2; }
и блок #column поместить в middle
Большое спасибо! Теперь все получилось.
site-creator только что попробовала, но это не поможет, возможно это не то, либо, я что то не так сделал.
в любом случае обрезать высокий блок можно
Большое спасибо. Надо обязательно попробовать.
Есть еще более интересный вариант, пример:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Спасибо за ссылку! Очень интересная техника.
На мой взгляд вариант не интересен тем, что требует массы дополнительных контейнеров :)
Причем, в нем не будет возможности сделать каждому блоку отдельную свою рамку (border).
Но имеет право на жизнь :)
На счет практичности, конечно же, под вопросом. Но вот сам способ мне понравился, такая заковыристая методика =)
В этом то и беда :(
Если, есть возможность сделать проще, то так и надо делать :)
Легче будет разобраться не подготовленному человеку.
В любом случае принцип – “необходимо и достаточно” рулит всегда :)
Не говоря от том, что надежность разметки повышается в разы :)
Согласен полностью ;)
В данном случае, я думаю, что Вы просто поспешили с ответом.
Возможно.
Но посмотрев на нагромаждение лишних блоков, нет никакой охоты разбираться :)
Возьмите за основу скриншот по моей ссылке на статью из комментрария № 2, в статье есть линки на примеры, если удастся сделать нечто похожее, буду только рад, но учитывая принцип “необходимо и достаточно” и посчитав количество нужных для этого контейнеров к какому выводу вы придете?
Так стоит ли огород городить?
Люди, человеки!
Я конечно все понимаю, но за конструкцию
* {
margin: 0;
padding: 0;
}
руки отбивают
А в чем проблема?
А как насчет 2-х сайдбаров по бокам фиксированной ширины, а центральную сделать резиновой?
Сходите на http://csstool.ru/, там найдется такой.
Dimox! читаю вас с удовольствием и помощи между делом получить хочу, ткните ссылкой, примером на 3-x колонучную резину где центр фикс а сайдбары в процентах
с уважением Сергей.
Спасибо, Сергей.
Вот здесь есть несколько вариантов, может быть подойдут – http://www.cssplay.co.uk/layouts/three-column-layouts
Привет. Прочитал статью, комментарии. Но так и не нашел способа с прижатым подвалом к низу экрана. За основу я брал метод с position:absolute.
Вам сюда.
У меня с position:absolute тянется блок “column” в зависимости от контента. Больше никак. Так у всех?
Привет Dimox.
Подскажи как сделать резиновым шаблон. Я хочу сделать на wordpress блог картинок. В кратком описании (до кнопки подробнее ) я вставляю картинку маленького разрешения, а в подробном картинку в полном разрешении. Так при обычном шаблоне картинка вылезает из шаблона и смотрится очень тупо. Я хочу чтобы шаблон растягивался под картинку. Почему я хочу это сделать?
потому что я пробовал так делать на ucoz и гугл это очень хорошо оценил, но на ucoz это делать очень долго( я про заполнение alt и описаний к картинке).
Заранее спасибо.
А вот у меня на фоне сайта стоит картинка http://nlt-povolje.ucoz.org/ она не умещается в некоторые экраны как мне сделать чтобы он регулировался сам
Где-то на хабре однажды была статья об этом.
а где точнее