Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 138
Обзор хороший, но по сути — все есть костыли, и ради чего? Чтобы не использовать старый добрый table. )
Да уж. И пока люди не забудут про ИЕ как про страшный сон — покой нам только снится.
ИЕ 6 и 7 только лишь ;-)
Так что не так все страшно…
Так что не так все страшно…
старый и ужасный тэйбл.
Эта притча была рассказана одно тысячелетие назад каким-то проповедникам, в ней table большое зло. Атуй его.
P.S. А вообще говорят, что пока весь код table не загрузится — его контент не отобразится, а у див все типа шито крыто.
P.S. А вообще говорят, что пока весь код table не загрузится — его контент не отобразится, а у див все типа шито крыто.
блин. Не нужно сравнивать тэйблы с блоками в контексте когда HTML используется только для хранения данных, а CSS оформление.
В табличной верстке сложно разбираться. Она менее понятна, чем блочная.
<table>
<tr>
<td>раз колонка</td>
<td>двас колонка</td>
<td>трис колонка</td>
</tr>
</table>
Это менее понятно, чем примеры из статьи? Ах да, приведённый выше код не требует никаких жабаскриптов, работает во всех браузерах, в принципе он и без ксс обойдётся :)
Пы.Сы: по крайней мере Опера умеет отображать табличный контент по мере загрузки, современные скорости, в массе своей, не особо то и напрягают с полной загрузкой страницы :)
Еще навешайте туда кучу атрибутов и тогда совсем «понятно» станет))))
С сегодняшнего дня начну верстать таблицами.
Я где-то говорил что я против таблиц в конкретном примере? Хотя я все равно против… :)
Ваш код синтетический. Добавьте в него оформление (углы скругленные, разделители между колонками и т.д.) и посмотрим что у вас получится (скорее всего возникнет соблазн делать подобные моменты за счет введения новых столбцов и строк). В большой таблице, часть элементов которой отвечают за дизайн, реально сложно разобраться. В такой верстке, в отличие от блочной, тяжело разделить разметку и оформление (при блочной верстке оформление можно запихнуть в отдельный элемент в начале или конце блока, а при табличной мы завязаны на структуре таблицы).
Если вы используете таблицу только для разметки колонок, а дальше у вас будет нормальная верстка — получится вполне себе хороший код и простая реализация и это замечательно. Хотя я все равно бы использовал 3 или 4 div-а (для трехколонной верстки). Почему?
При блочной верстке работать с такой конструкцией будет удобней (если в колонках будут реальные таблицы).
Ну и самое главное. :)
Верстать блоками проще. Как я в свое время запарился подгонять бордеры меню, содержимого сайта и т.д… :(
Я где-то говорил что я против таблиц в конкретном примере? Хотя я все равно против… :)
Ваш код синтетический. Добавьте в него оформление (углы скругленные, разделители между колонками и т.д.) и посмотрим что у вас получится (скорее всего возникнет соблазн делать подобные моменты за счет введения новых столбцов и строк). В большой таблице, часть элементов которой отвечают за дизайн, реально сложно разобраться. В такой верстке, в отличие от блочной, тяжело разделить разметку и оформление (при блочной верстке оформление можно запихнуть в отдельный элемент в начале или конце блока, а при табличной мы завязаны на структуре таблицы).
Если вы используете таблицу только для разметки колонок, а дальше у вас будет нормальная верстка — получится вполне себе хороший код и простая реализация и это замечательно. Хотя я все равно бы использовал 3 или 4 div-а (для трехколонной верстки). Почему?
<table>
<tr>
<td>раз колонка
<table>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>бред</td>
<td>бред</td>
</tr>
<tr>
<td>бред</td>
<td>бред</td>
</tr>
</tbody>
</table>
</td>
<td>двас колонка</td>
<td>трис колонка</td>
</tr>
</table>При блочной верстке работать с такой конструкцией будет удобней (если в колонках будут реальные таблицы).
Ну и самое главное. :)
Верстать блоками проще. Как я в свое время запарился подгонять бордеры меню, содержимого сайта и т.д… :(
> А вообще говорят, что пока весь код table не загрузится — его контент не отобразится
Это правда, но ведь это крайне редко мешает, таблица должна быть просто огромной, чтоб пользователь что-то заметил, при нынешних скоростях инета… И в случае с огромной таблицей лучше конечно использовать div, но я бы всё равно смешал, только на дивах мне не нравится однозначно.
Это правда, но ведь это крайне редко мешает, таблица должна быть просто огромной, чтоб пользователь что-то заметил, при нынешних скоростях инета… И в случае с огромной таблицей лучше конечно использовать div, но я бы всё равно смешал, только на дивах мне не нравится однозначно.
P.S. Не просто говорят "Не очевидные истины. Скелет страницы таблицей. Неправильно.", но и подтверждают на практике ;)
Вообще таблицы сами по себе не зло, зло их использовать для разметки. Если же требуется выводить табличные данные (в данные в колонках как раз таковыми и могут быть), то ни чего криминального в этом нет.
Вообще таблицы сами по себе не зло, зло их использовать для разметки. Если же требуется выводить табличные данные (в данные в колонках как раз таковыми и могут быть), то ни чего криминального в этом нет.
Давайте переименуем table в что-нибудь другое, назовем тег по другому, а механизм оставим. Думаю все сразу будут довольны. Это же уже не таблицы.
P.S. Я хочу сказать то, что механизму приписали определение таблиц и все в это верят.
P.S. Я хочу сказать то, что механизму приписали определение таблиц и все в это верят.
Во что верят, не уловил… В то, что содержимое таблицы не отображается браузером до получения закрывающего table? Так это не вопрос веры, это факт.
Не только в IE. Во всех браузер. Аргумент я привел причем в практическим примером (которы не понятно с какого перепоя минусанули, хотя понятно, лемминги...).
Какой тут еще пример нужен?! Нагляднее некуда, каждый может сходит и ссылке и сам убидиться.
Какой тут еще пример нужен?! Нагляднее некуда, каждый может сходит и ссылке и сам убидиться.
При нынешних скоростях инета какова вероятность что не загрузится?
Table ужасен, прежде всего, тем, что это первый, так сказать, «инструмент», который осваивают начинающие верстальщики. Нет ничего плохого в том, чтобы организовать раскладку страницы таблицей, но вот лепить эти самые таблицы где ни попадя, как зачастую и делают, уже явный перебор.
Никогда не встречали три-четыре вложенных одна в другую таблиц с одной единственной строкой и столбцом? А я встречаю, и притом очень часто.
Вот этим, скорее всего, и вызвана ненависть к таблицам. Не столько из-за самих таблиц, как из-за неправильного повсеместного их использования.
P.S. Ах, да. Попробуйте в табличной сменить местами порядок вывода колонок.
Никогда не встречали три-четыре вложенных одна в другую таблиц с одной единственной строкой и столбцом? А я встречаю, и притом очень часто.
Вот этим, скорее всего, и вызвана ненависть к таблицам. Не столько из-за самих таблиц, как из-за неправильного повсеместного их использования.
P.S. Ах, да. Попробуйте в табличной сменить местами порядок вывода колонок.
В чём в данном случае причина отказа от таблицы? Объясните пожалуйста.
Наша песня хороша, начинай с начала
«Table vs Div»
«Table vs Div»
Может чего-то не понимаю, но чем table плох? Тем более, что в первом примере, если DIV заменить на TABLE, UL на TR, а LI на TD, получится классическая табличная конструкция. И не надо никаких CSS-извращений, учитывая, что TABLE совместим со всеми даже самыми древними браузерами и, скорее всего, с большинством тех, которые появятся в следующие 10 лет.
Просто дань моде, я считаю. Все должно быть оправдано, и нормальная смешанная верстка ничем не хуже той где только одни слои.
Я про что и говорю. Главное конечный результат, оптимальный и универсальный (учитывая разношерстность вкусов юзеров в отношении средств веб-серфинга). А валидность или кошерность кода — это так…
Попробуйте сделать таблицей правую колонку слева, а левую справа. Ведь в коде должен идти сначала основной контент, а потом дополнительная колонка, а на дизайне дополнительная колонка часто находится слева.
А зачем вставлять в контент картинку шириной «которая не вписывается в контент»? Все размеры картинок в контенте изначально придумывает и утверждает дизайнер, а потом программно реализуется ресайз, если постинг картинок идёт извне. Если нужна большая картинка, то делаем popup по ссылке с картинки в контенте.
Где вы видели нормальный сайт с картинками, когда загруженные картинки распирают всю вёрстку? Ваш случай не реальный при грамотной разработке сайта.
Где вы видели нормальный сайт с картинками, когда загруженные картинки распирают всю вёрстку? Ваш случай не реальный при грамотной разработке сайта.
Почему так сложно понять то, что результат должен удовлетворять одному условия — только «div»ное решение. Не нужно тут вспоминать про таблицы. Есть люди которые ими не хотят верстать и то, что для вас считается быстрым решением таблицами в данном случае не подходит из-за принципиальных взглядов.
В таком случае топикстартер должен был сделать соответствующую пометку, мол, «исключительно для дивных верстальщиков», а раз пометки нет, значит рассматривается общий случай.
это бюрократия, нормальные люди и без таких пометок понимают такие простые истины.
Таблица (из лат. tabula «доска») — способ передачи содержания, заключающийся в организации структуры данных, в которой отдельные элементы помещены в ячейки, каждой из которых сопоставлена пара значений — номер строки и номер колонки. Таким образом устанавливается смысловая связь между элементами, принадлежащими одному столбцу или одной строке.
©
Вот представьте в недалеком будущем интеллектуальные устройства, которые могут не только собирать и хранить информацию, но и анализировать ее (компьютеры, отвечающие на вопросы из любой фантастической книги). Из-за «табличных верстальщиков» подобные программы будут сталкиваться с большими трудностями в поисках упомянотой выще смысловой связи информационных элементов по горизонтали и вертикали.
Т.е. «табличные верстальщики» должны четко отдавать себе отчет в том, что то, что они делают — это не таблицы. У данных в ячейках нет никакой смысловой связи между собой, у колонок и строк нет и не может быть обозначения. Все системы, пытающиеся рассматривать такую «таблицу» как таблицу будут сталкиваться с неразрешимыми проблемами.
В настоящем проблемы другие: технические (выше упомянуто не раз), адаптация для разных устройств. Знаете, html можно читать не только браузером ПК/КПК или мобильника, но также принтером, генератором голоса и черти знает еще чем — все кроме браузера ПК представит информацию не так, как хотелось бы получателю. «Табличные верстальщики» — отцы основатели совершенно идитских «версий для печати», «версий для КПК» и проч. и проч. — в HTML это ничего не нужно. Одна и та же правильно сверстанная страница прекрасно должна и может быть воспроизведена любым устройством.
По моему, уже сейчас поисковики вполне себе прилично отделяют зёрна от плёвел. Если в недалёком будущем ИНТЕЛЕКТУАЛЬНЫЕ устройства не смогут делать того, что сейчас умеют тупые боты, то нафиг нам такие устройства?
Почему это у колонок при табличной вёрстке нет своего обозначения и назначения? Очень даже есть. В простом варианте: меню, контент, всяка-бяка — чем не разделение по смыслу?
Создание разных версий сайта для разных устройств, например КПК. Подразумевается, что для этой версии нужно максимально облегчить и упростить страницу. Средствами CSS я действительно могу скрыть графику и ненужные блоки информации, но они ведь скроются только визуально, а реально всё равно будут грузиться (или я заблуждаюсь в этом вопросе?). С жабаскриптами вообще непонятно, они вроде бы при помощи CSS не отрубаются. Т.е. где выигрыш то? Разработчику конечно легче, но вот посетитель в данном случае проигрывает. А сайты, вообще-то, не для разработчика делаются, а для посетителей.
Почему это у колонок при табличной вёрстке нет своего обозначения и назначения? Очень даже есть. В простом варианте: меню, контент, всяка-бяка — чем не разделение по смыслу?
Создание разных версий сайта для разных устройств, например КПК. Подразумевается, что для этой версии нужно максимально облегчить и упростить страницу. Средствами CSS я действительно могу скрыть графику и ненужные блоки информации, но они ведь скроются только визуально, а реально всё равно будут грузиться (или я заблуждаюсь в этом вопросе?). С жабаскриптами вообще непонятно, они вроде бы при помощи CSS не отрубаются. Т.е. где выигрыш то? Разработчику конечно легче, но вот посетитель в данном случае проигрывает. А сайты, вообще-то, не для разработчика делаются, а для посетителей.
По моему, уже сейчас поисковики вполне себе прилично отделяют зёрна от плёвел. Если в недалёком будущем ИНТЕЛЕКТУАЛЬНЫЕ устройства не смогут делать того, что сейчас умеют тупые боты, то нафиг нам такие устройства?
Не соглашусь. Все, что сейчас умеют «тупые боты», это находить в сети ответ другого человека на ваш вопрос путем соовпадения слов (утрированно). Сами ответить на него они не могут.
Почему это у колонок при табличной вёрстке нет своего обозначения и назначения? Очень даже есть. В простом варианте: меню, контент, всяка-бяка — чем не разделение по смыслу?
Вы не поняли, что я сказал. В таблицах (настоящих), есть смысловая связь по каждой вертикали и каждой горизонтали. Посмотрите на таблицу, расшифровкой значения каждой ячейки является пересечение колонки и ряда. Из этой таблицы очевидно, что метр — русское название единицы измерения длины (в системе Си — с учетом контекста документа). Это — таблица, а «меню контент, всяка-бяка» — это, простите, детский лепет (меню — это пересечение какой колонки с каким рядом?).
Создание разных версий сайта для разных устройств, например КПК. Подразумевается, что для этой версии нужно максимально облегчить и упростить страницу. Средствами CSS я действительно могу скрыть графику и ненужные блоки информации, но они ведь скроются только визуально, а реально всё равно будут грузиться (или я заблуждаюсь в этом вопросе?)
Вы опять меня не верно поняли. Для разных устройств может быть принципиально разное расположение элементов, принципиально разная визуальная структура документа. Именно поэтому половина ру(?)нета завалена дубликатами информации «для печати» и «для кпк».
Насчет загрузки — невидимые картинки (в общем случае — элементы дизайна) грузиться не будут. А размер HTML-кода не так важен — он чаще всего является небольшой частью от всего документа, ну и про round-trip-time забывать не стоит.
С жабаскриптами вообще непонятно, они вроде бы при помощи CSS не отрубаются.
Про js я ничего не говорил.
Блин, как же вы (не вы конкретно) надоели прикапываться к слову «таблица». Ну переименуйте вы «таблицу» в «сетку», всё больше ничего не меняйте. Вас идеологически устроит тогда вёртка «сетками»?
Вас идеологически устроит тогда вёртка «сетками»?
Да, как только «сетки» будут добавлены в HTML.
А до тех пор, когда вы (не вы конкретно) пишете — вы сообщаете пользователю вашего кода о том, что это таблица, со всемы вышеизложенными вытекающими.
ps: я прекрасно понимаю, что переубедить вас невозможно.
А до тех пор, когда вы (не вы конкретно) пишете <table>*
скушалось.
скушалось.
Когда в стандарт добавляли таблицы, в составе рабочей группы явно небыло верстальщиков и дизайнеров — програмисты, учёные, разработчики браузеров и т.п., а вот людей, которые собственно и будут работать с этим стандартом в группе небыло. Именно по этой причине появились таблицы и не появились сетки (хотя их сплош и рядом, насколько мне известно, используют в полиграфии). О верстальщиках и дизайнерах более-менее серьёзно вспомнили только сейчас, до этого же приходилось выкручиваться создавая монструозные конструкции.
Почему сетки не появились в стандарте? Да всё просто, просто победили сторонники блочной модели, хотя очевидно, что оптимальный вариант был бы — сетка+блоки.
Почему сетки не появились в стандарте? Да всё просто, просто победили сторонники блочной модели, хотя очевидно, что оптимальный вариант был бы — сетка+блоки.
Действительно лучше заменить на таблицу, а в оставшиеся часа 4 попить пиво :-)
Спасибо.
Последний способ ничем не отличается от способа с использованием таблиц — он не семантичен, в нем нагромождения кода, он трудно читаем.
Забыт еще пример с использованием бордеров у центрального блока, равным ширинам сайдбаров, и абсолютным позиционированием этих самых сайдбаров.
Забыт еще пример с использованием бордеров у центрального блока, равным ширинам сайдбаров, и абсолютным позиционированием этих самых сайдбаров.
Самый правильный способ — js: не портим разметку ничего не значащими блоками, работаем везде, просты и понятны.
А аргумент с отключением не катит ни разу, покажите мне сайт из топ 100 без него? ну не считая поисковой строки гугла
А аргумент с отключением не катит ни разу, покажите мне сайт из топ 100 без него? ну не считая поисковой строки гугла
Мне тоже способо с использованием JS больше нравится. Его и использую если нужны колонки одинаковой высоты.
опечатался… «способ»
А что если контент меняется в одной из колонок? А что если это происходит регулярно? А что если это какой нибудь контент который неизвестно когда загрузиться ( ютуб какой нибудь ). Придётя опять выравнивать. А если эта структура (колонки) является частью какого то ещё блока и от его высоты зависит ещё какая-нибудь колонка. Её тоже надо жаваскриптом выравнивать.
Выравнивать колонки скриптом — балаган.
Выравнивать колонки скриптом — балаган.
Тупой способ, 70 Кб jQuery подключать только ради колонок. И вообще, для верстки есть css. Уж логичней тогда сделать через display:table, а для криворуких браузеров — маленький скриптик/behaviour на пару килобайт.
Ну так не обязательно jq, лучше самому написать… хотя фреймворки и так почти везде используются
С css появляется хлам в разметке и количество css немаленькое и непонятное
С css появляется хлам в разметке и количество css немаленькое и непонятное
Поэтому, кстати, рекомендуется подключать jquery прямо с google.code.
Если бы большая часть веб-мастеров делали так, то тогда бы фреймворк на пользовательской машине загружался бы один раз, а не для каждого сайта заново.
Если бы большая часть веб-мастеров делали так, то тогда бы фреймворк на пользовательской машине загружался бы один раз, а не для каждого сайта заново.
Была бы интересна комбинированная реализация первого и второго способа — для всех display: table, для IE 7 и 6 — колонки одинаковой высоты с помощью JS.
напишу сегодня ночью, давно собирался, но эта статья видно — знак)
что интерестно, с display: table-cell есть проблемы в FF3 (в FF3.5 исправили), я писал про это в микрохабре на большую статью всё времени небыло, да и FF3.5 не было тоже)
что интерестно, с display: table-cell есть проблемы в FF3 (в FF3.5 исправили), я писал про это в микрохабре на большую статью всё времени небыло, да и FF3.5 не было тоже)
Надо еще обязательно рассмотреть способ эмуляции поведения «vertical-align: middle» в IE.
да-да-да)
причём если задавать ширину, то всё ок
проблема если первая ячейка — резиновая, а вторя — фиксированная.
со второй загрузки всё ок, но второй раз такой сайт уже не загрузят)
загрузил старый код в 3.5 — хм, интерестно, в 3.1beta было нормально, а в 3.5 — опять тот же прикол.
ну да посмотрю варианты)
проблема если первая ячейка — резиновая, а вторя — фиксированная.
со второй загрузки всё ок, но второй раз такой сайт уже не загрузят)
загрузил старый код в 3.5 — хм, интерестно, в 3.1beta было нормально, а в 3.5 — опять тот же прикол.
ну да посмотрю варианты)
Может скриптом попробовать заменять дивы на td,tr,table?
В этих тегах у IE реализованы все необходимые свойства…
В этих тегах у IE реализованы все необходимые свойства…
Только JS в этом случае лучше не в скрипте, а в expression'e писать.
Как-то вот так: height: expression (parentNode.Height+'px')
Как-то вот так: height: expression (parentNode.Height+'px')
Чем плохи таблицы — попробуйте быстро поменять местами пару колонок.
А так-то конечно, ни тебе забот о выравнивании, ни о высоте колонок…
А так-то конечно, ни тебе забот о выравнивании, ни о высоте колонок…
В примере с JS нет ни одного скрипта. А по сути: что будет, если пользователь увеличит размер шрифта? Поставите таймер, который будет постоянно проверять размер, создав тем самым ненужную нагрузку на клиента?
Вы случаем подписи к картинкам не перепутали?)
Кто вам сказал, что таблицами верстать проще? Я, например, не учился верстке таблицами, с ними постоянно проблемы, например, ширина колонки может самопроизвольно увеличиваться (если общ. ширина таблю выйдет больше суммы ширины столбцов), или высота — непонятно как для 3строчной таблицы задать фиксированныю высоту шапки и подвала, а средний ряд сделать высотой 100% — (подвал + шапка). Непоянтно, как задать фон картинкой на элементе tr (n к сафари применяет его не к tr а к каждому td отдельно). Проблемы с вставкой контента innerHTML. ячейку нельзя вырвать и сделать абсолютно позиционированной. td может быть произвольно растиянута находящимся внутри контентом (даже если он засунут в див с overflow:hidden, он зараза все равнорастягивает ячейку).
Проблема со стилями: задаешь стиль для таблиц в контенте, он применяется к таблице, использованной для верстки, и наоборот, жутко бесит.
Сложно сделать стили для печати, или для узкого экрана.
По моему, так возни с таблицами больше, и проблем. Ничего больше не буду верстать этим долбанутым способом.
И еще 1 плюс дивной верстки: на редкость логичный код:
> div id=wrapper
> div id=content
> h1 Заголовок /h1
> p текст /p
> table табличка /table
> ul список /ul
>
> div id=menu
> ul меню /ul
>
> div id=footer
> address футер /address
> div id=search
>
> div id=header
>
>… тут всякий ненужный хлам
Такой HTML отлично смотрится даже без стилей (и в браузере links :)), к нему легко добавлять стили для печати, и просто приятнее работать.
Проблема со стилями: задаешь стиль для таблиц в контенте, он применяется к таблице, использованной для верстки, и наоборот, жутко бесит.
Сложно сделать стили для печати, или для узкого экрана.
По моему, так возни с таблицами больше, и проблем. Ничего больше не буду верстать этим долбанутым способом.
И еще 1 плюс дивной верстки: на редкость логичный код:
> div id=wrapper
> div id=content
> h1 Заголовок /h1
> p текст /p
> table табличка /table
> ul список /ul
>
> div id=menu
> ul меню /ul
>
> div id=footer
> address футер /address
> div id=search
>
> div id=header
>
>… тут всякий ненужный хлам
Такой HTML отлично смотрится даже без стилей (и в браузере links :)), к нему легко добавлять стили для печати, и просто приятнее работать.
четвёртый способ чем-то напоминает способ Сергея Чикуёнка — chikuyonok.ru/2009/06/float-columns/, но последний всё же более универсален и имеет больше плюсов при той же, имхо, сложности кода…
А оно того стоит?
Если вам понадобилось создать три колонки одинаковой высоты, то нужно пятьсот раз подумать, почему бы не использовать таблицы.
И здесь именно тот случай, когда с таблицами кода будет меньше. Хотя это зависит от конкретной задачи.
Если вам понадобилось создать три колонки одинаковой высоты, то нужно пятьсот раз подумать, почему бы не использовать таблицы.
И здесь именно тот случай, когда с таблицами кода будет меньше. Хотя это зависит от конкретной задачи.
Исправьте, пожалуйста: ссылки к примерам 2 и 3 перепутаны. Там, где «Искусственные колонки» в примере JS, а где JS в примере наоборот страница с картинкой колонок в фоне.
Способ с использованием JS, имхо, вообще не катит для большинства сайтов.
Я за таблицы для таких случаев.
Я за таблицы для таких случаев.
Ну неужели блоки с текстовой информацией обязательно надо раскрашивать? А если ракрасили, так уже непременно стоит растянуть до пола?
Симетрия в дизайне — зло.
Симетрия в дизайне — зло.
Полностью от таблиц отказываться нельзя, к сожалению(ну, кроме как, не верстать такие макеты). Да, мы должны верстать семантично, но что поделать, если без таблиц не обойтись в таких ситуациях? Множество примеров, которые я видел, несемантичны и иногда даже трудны в понимании.
Бред. И где решение?
1-ый способ: в ИЕ не работает — уже отпадает
2-ой способ: JS — во-первых, может быть отключен, во-вторых, данные могут динамически подгружаться, придется каждый раз через JS высоту дергать :(
3-ий способ: не всегда одним фончиком можно отделаться.
4-ый способ: нахера такая херня с кодом, который не факт, что будет работать на всех платформах-браузерах, если есть старый добрый
padding-bottom: 2000em;
margin-bottom: -2000em;
и для внешнего дива overflow: hidden;
В общем, статья не актуально, полезной информации не несет.
1-ый способ: в ИЕ не работает — уже отпадает
2-ой способ: JS — во-первых, может быть отключен, во-вторых, данные могут динамически подгружаться, придется каждый раз через JS высоту дергать :(
3-ий способ: не всегда одним фончиком можно отделаться.
4-ый способ: нахера такая херня с кодом, который не факт, что будет работать на всех платформах-браузерах, если есть старый добрый
padding-bottom: 2000em;
margin-bottom: -2000em;
и для внешнего дива overflow: hidden;
В общем, статья не актуально, полезной информации не несет.
В первом способе, там где недостатки, есть такая строчка:
>когда IE7 станет новым IE6
Насторожило. Видимо, очепятка? Или тут есть какой-то глубокий философский смысл…
>когда IE7 станет новым IE6
Насторожило. Видимо, очепятка? Или тут есть какой-то глубокий философский смысл…
Не понимаю, столько лишнего кода и потраченого времени. Правда сделано без таблиц… ну и что? Какая от этого польза — потраченое время? Бъло бы короче и быстрее чем таблицы — тогда бы было хорошо и полезно. Реальной пользе (кроме понтоватся) от этого нет
faux-colums поддерживает резиновую вёрстку, разве нет?
Зачем вообще эти килотонны кода? Чтобы иметь три, четыре, сколько-угодно дивов одинаковой высоты, достаточно указать всем float:left. О чём все это?
Разумеется во всех браузерах вот с таким <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" «www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»> доктайпом
я 10 минут тупил насчёт последнего способа и понял, только просмотрев код примера по ссылке. этого не потребовалось бы, если бы автор правильно расставил табуляции в примере:
так понятнее, неправда ли? :)
<div class=”rightback”>
<div class=”contentback”>
<div class=”leftback”>
<div class=”leftsidebar”>…Lots Of Content…</div>
<div class=”content”> …Lots Of Content…</div>
<div class=”rightsidebar”> …Lots Of Content…</div>
</div>
</div>
</div>
так понятнее, неправда ли? :)
Для такого есть js библиотека stickjaw. Там и другие фичи есть. https://github.com/xakplant/stickjaw
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
4 способа как создать блоки одинаковой высоты