30 мая 2007, 14:43

Float, margin, padding, overflow:hidden;

Думал, все - тема закрыта, ан нет...

Не хочется выглядеть человеком "приватизирующим" данную тему в Рунете, но чем дальше в лес, тем больше узнаешь о возможностях "Каскадных таблиц стилей".

Предлагаемое решение гораздо проще, чем описанное в одном из предыдущих постов. Едва ли это можно назвать открытием, ничто не ново под луной и если хорошо поискать, найдется, что-то похожее и наверняка в лучшей реализации, ни капли сомнений на это счет.

Проблема иллюзии, возможно, от этого термина применительно к не возможности создания колонок одинаковой высоты с помощью слоев, стоит отказаться, решается следующим образом.

Контейнеру, в котором находятся колонки, количество колонок ограничено только вашими желаниями, назначается стилевое правило overflow:hidden; а всем колонкам margin-bottom:-32767px; padding-bottom:32767px;

О чем говорят данные параметры? Это один из способов спрятать не равенство колонок, максимально их, удлиняя, в тоже время, обрезая в зависимости от наполнения контентом, по самой высокой из них с помощью overflow:hidden;

Скопировать код в буфер обмена Листинг № 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>height</title>
<meta http-equiv=content-type content="text/html; charset=windows-1251">
<style type="text/css">
* {font:13px/1.18 verdana;margin:0;padding:0;}
body {text-align:center;}
#trifler {margin:5px auto 0;overflow:hidden;width:930px;}
#trifler div {
  background:#eee;
  border-left:#000 1px solid;
  border-right:#f00 1px solid;
  float:left;
  margin-bottom:-32767px;
  padding-bottom:32767px;
  width:230px;
}
#trifler .col1 {background:#ddd;margin-left:-1px;border-left:#f00 1px solid;}
#trifler .col2 {background:#f6f6f6;margin-left:-1px;border-left:#00f 1px solid;}
#trifler .col3 {background:#eee;margin-left:-1px;border-left:#c90 1px solid;border-right:#000 1px solid;}
.clear {clear:both;}
p {margin:5px 15px;text-align:left;}
p.height {color:purple;}
p.height a{color:#960;display:block;clear:both;text-decoration:underline}
p.height a:hover{color:green;height:330px}
</style>
</head>
<body>
<DIV id="trifler">
<DIV>
<P>
Вместе с тем, политическое учение Локка постоянно.<p>
<p>Политическое учение Локка
традиционно формирует культ личности (отметим, что это особенно важно для гармонизации
политических интересов и интеграции общества).</p>
<p>Либеральная теория категорически
представляет собой англо-американский тип политической культуры, что было отмечено
П. Лазарсфельдом.</p>
<p>Парадигма трансформации общества, однако, означает системный
референдум, об этом прямо сказано в ст. 2 Конституции РФ.
</P>
<p class="height"><a href="#">Делаем колонку длиннее</a><br>
Наводим курсор, смотрим вертикальную прокрутку, вращаем колесико мыши :)</p>
</DIV>
<DIV class="col1">
<P>
Политическая культура, как бы это ни казалось парадоксальным, важно определяет
теоретический гуманизм (приводится по работе Д. Белла "Грядущее постиндустриальное
общество").</p>
<p>Правовое государство, несмотря на внешние воздействия, означает
бихевиоризм, хотя на первый взгляд, российские власти тут ни при чем. Форма
политического сознания, на первый взгляд, неоднозначна.
</P>
<p class="height"><a href="#">Делаем колонку длиннее</a><br>
Наводим курсор, смотрим вертикальную прокрутку, вращаем колесико мыши :)</p>
</DIV>
<DIV class="col2">
<P>
 В данной ситуации культ
личности означает системный феномен толпы, если взять за основу только
формально-юридический аспект.</p>
<p>Теологическая парадигма символизирует коммунизм,
такого мнения придерживаются многие депутаты Государственной Думы. Культ личности,
тем более в условиях социально-экономического кризиса, неравномерен.
</P>
<p class="height"><a href="#">Делаем колонку длиннее</a><br>
Наводим курсор, смотрим вертикальную прокрутку, вращаем колесико мыши :)</p>
</DIV>
<DIV class="col3">
<P>
Парадигма трансформации общества важно обретает конструктивный тоталитарный тип
политической культуры, на что указывают и многие другие факторы.
ристианско-демократический национализм вызывает гносеологический либерализм,
о чем писали такие авторы, как Н. Луман и П. Вирилио.</p>
<p>Теологическая парадигма,
в первом приближении, традиционно ограничивает субъект власти, что получило
отражение в трудах Михельса.</p>
<p>Понятие модернизации, с другой стороны, представляет
собой механизм власти, что получило отражение в трудах Михельса.
</P>
<p class="height"><a href="#">Делаем колонку длиннее</a><br>
Наводим курсор, смотрим вертикальную прокрутку, вращаем колесико мыши :)</p>
</DIV>
<div class="clear"></div>
</DIV>
</BODY>
</HTML>

Демо.

Минус присутствует, если указать нижний border любой из колонок, то вы его не увидите, исправляется прикруткой FOOTER-а.

Область применения новостной портал или, что-то подобное, где необходимо поместить массу информации в структурированном виде.

Браузеры: IE6(7), FF2.0, OPERA9.20.

30 мая 2007, 18:34

№ 1vlad random

еще минус... если в этих колонка находится какой либо объект на который ссылаются по ссылке типа #article, то в куда занесет браузер одному богу известно...
и еще минус... background-position:0 100%; и вы не увидите изображения, по сути аналогично поведению с бордером
есть более элегантное решение убирающее проблему ссылки (но не бордера и не бекграунда в IE):
частичная модификация твоего CSS:
#trifler {margin:5px auto 0;width:930px;display:table;}
#trifler div {
background:#eee;
border-left:#000 1px solid;
border-right:#f00 1px solid;
width:230px;
display:table-cell;
}
* html #trifler div {
float:left;
margin-bottom:-32767px;
padding-bottom:32767px;
overflow:hidden;
}
*+html #trifler div {
float:left;
margin-bottom:-32767px;
padding-bottom:32767px;
overflow:hidden;
}
и в конце удаляем

Anonymous

30 мая 2007, 20:01

№ 2

Про ссылку, видимо чего-то не понимаю ;)
Решение проблемы нижнего border-а предлагалось
background-position:0 100%; не проверял, на вскидку вложенный div и {background:url() repeat-y;} для него, надо посмотреть.

Посмотрите предложенное вами в OPERA и FireFox, мне не понравилось.

gordi

Трекбэки:

10 февраля 2010, 11:47

№ 3 UGgallery » Учебник по CSS-верстке

Последняя редакция: 1 июня 2009 г. Оглавление Основные приемы CSS-верстки Верстка в несколько колонок Как я делаю две колонки (CSSing) В поисках Святого Грааля (Design For Masters) Простой двухколоночный макет (Zhilinsky) Простой прием или колонки одинаковой высоты (CSSing) "Float, margin, padding, overflow:hidden;" (колонки одинаковой высоты) (Trifler.ru) Кроссбраузерный inline-block (Grakhov.

Адрес заметки: http://trifler.ru/blog/post_1180521818.html

Ваш комментарий к статье:

HTML and CSS

HTML and CSS

{Лаборатория экстремальной web-верстки...}

Float, margin, padding, overflow:hidden;

Трекбэки:

Рейтинг популярности - на эти заметки чаще всего ссылаются: