Легкая равная высота DIV без JavaScript возможно?

Question

Я работал в основном с табличными макетами до этого момента, но так как это считается недействительным в прошлом, я взял на себя задачу изучения макета на основе DIV.

Одна из самых неприятных проблем для меня заключается в том, чтобы найти способ получить равные высоты DIV, которые работают на всех основных браузерах, не полагаются на JavaScript и не требуют complicated CSS tactics. Это меня заставляет задуматься, почему использование DIV является предпочтительным способом выполнения макетов, а таблицы позволяют быстро и легко создавать элементы страницы с равной высотой.

Какие у меня варианты? Если нет идеального способа, вы бы рекомендовали сделать это с помощью jQuery? Я хотел бы применить эту технику к боковой панели, которая может быть просмотрена here. (Это тестовая среда для темы, которую я разрабатываю.)

Обновление: высота колонок неизвестна заранее; это зависит от того, сколько контента он должен уместить.

Answer 1

Там не идеальный способ, насколько я знаю, и это одна из слабых точек CSS.

В вашем случае, однако, вы можете работать с Faux Columns technique.

Answer 2

here is an example using pure css 

body{margin-bottom:50px} 
div.holder { overflow:hidden } 
div.holder div { float:left; width:30%; background-color:#9C0; margin-right:5px; padding:10px; padding-bottom:9000px; margin-bottom:-9000px } 

http://abcoder.com/wp-content/uploads/2009/09/css-equal-height-three-column-layout.html

Answer 3

Если стандарты не позволяют делать то, что вам нужно, завинтите их и используйте таблицу.