Предлагает ли CSS3 лучший способ иметь двухколоночный веб-сайт с верхним и нижним колонтитулами, равными по высоте столбцами и эластичной шириной столбцов?

Question

Я недавно написал сайт, который немного запутан в том, как он работает.Я использовал этот шаблон CSS и этот трюк с равной высотой столбцов .У меня есть не один, а два контейнера, и я не могу вспомнить, что они делают.Это кажется неудовлетворительным.Поэтому я думаю о реструктуризации этой вещи с нуля и, возможно, использовании более «семантических» тегов html5, таких как <nav> и так далее.Мне интересно, есть ли какие-нибудь вещи типа CSS3, которые я могу сделать сегодня, которые улучшат код.

Вопрос: есть ли лучший способ добиться структуры сайта с такими свойствами:

• 2 столбца одинаковой высоты: одна навигационная боковая панель, один столбец основного содержимого (с шириной в процентах от доступной недвижимости, явно не указано)
• элемент верхнего и нижнего колонтитула, который растягивается на всю ширинувсего два основных столбца
• Это позволяет использовать семантические теги html5 вместо нескольких бессмысленных контейнерных элементов div

Answer 1

В css3 есть свойства отображения, которые позволяют вашим div-элементам вести себя как HTML-таблицы. То есть:

 #wrapper {
    display: table;
 }

 #wrapper div {
    display: table-cell;
 }

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

Вот пример jsfiddle с типом макета, который вы описываете: http://jsfiddle.net/duopixel/SKxCH/

Answer 2

На самом деле, CSS3 имеет функцию с несколькими столбцами, которая позволяет разделить элемент на равные столбцы. На Quirksmode.org есть хорошая запись: http://www.quirksmode.org/css/multicolumn.html

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