Это очень субъективная тема. Существуют различные библиотеки управления состоянием, такие как Redux, которые помогают решить эту проблему. Вы даже можете использовать свою собственную архитектуру личных предпочтений, такую как MVC / MVVM, для создания своих приложений. Если вы новичок, я бы посоветовал вам сначала изучить самостоятельно, что поможет вам понять плюсы и минусы выбранного вами подхода. Затем вы можете перейти к таким инструментам, как Redux / MobX.
Примеры, которые Вы нашли в alistapart.com, являются столь сложными, как они должны быть, и каждый серьезный пример, который можно найти о тех разметках, поддерживает дополнение. Вы найдете (и уже найденный) много хороших примеров об этом в Интернете, просто проведете некоторое время, пытаясь понять их, и Вы будете видеть, что они не являются так сложными в конце.
Так или иначе у меня есть хорошее демонстрационное расположение, подобное второму, которое Вы ищете, здесь: http://www.meiaweb.com/test/BMS_DM_NI/
В основном HTML - это:
<body>
<div id="head">
<h1>Title</h1>
</div>
<div id="main">
<div id="navigation">
<!-- navigation content -->
</div>
<div id="content">
<h2>Content Title</h2>
<p>
<!-- main content here -->
</p>
</div>
</div>
</body>
И CSS:
html {
overflow: auto;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
line-height: 1.5em;
}
#head {
height: 20px;
background-color: #666;
color: #AAA;
padding: 20px 20px;
}
#navigation {
width: 210px;
padding: 20px 20px;
background: #efefef;
border: none;
border-right: solid 1px #AAA;
float: left;
overflow: auto;
}
#content {
margin-left: 250px;
padding: 20px 20px;
}
Я думаю, что это достаточно просто, и это работает во всех современных браузерах.
Проверьте этот сайт:
http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm
Другие примеры расположения от вышеупомянутого:
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
http://matthewjamestaylor.com/blog/perfect-3-column.htm
Можно также посмотреть на Праздничное Расположение - 40 примеров различных, двух и трех процентов и fizxed-размерные разметки столбца.
Я знаю, что это - badwrong, чтобы сделать, и я - семантический кодер до конца (который не был предназначен для рифмы), но я все еще использую единственную таблицу расположения, чтобы сделать столбцы.
Почему? Это совместимо и просто. Это не требует смешных взломов CSS, которые едва-едва скрепляют вещи (серьезно, плавания предназначены для типографии, не расположения). Это отображается тождественно в каждом браузере в текущем использовании. Это. Просто. Работы. Это - семантический взлом, но иногда просто необходимо сделать то, что необходимо сделать.
Однако на горизонте существует свет. Таблица -* значения дисплея для CSS делают столбцы равной высоты тривиальными, хотя они могут все еще нарушить исходный порядок (Вам все еще нужен Ваш крайний левый столбец, чтобы быть перед Вашим центральным столбцом, даже если это - военно-морской раздел и должно подойти к концу Вашего кода страницы). IE8 и все браузеры неIE, уже поддерживают их.
Сетки CSS3 и Шаблонное Расположение CSS3 оба решат эту проблему правильно, но они все еще вполне немного далеко от того, чтобы быть применимым. Кодер мечта может, тем не менее, исправиться?
Я переделал свой демонстрационный шаблон, таким образом, Вы видите все три из своих запрашиваемых форматов в действии.
Это - решение CSS, никакие включенные таблицы. Я настроил это так, столбцы стороны являются зафиксированной шириной, заголовок/нижний колонтитул является зафиксированной высотой. Все остальное жидко.
Со всеми современными браузерами, за исключением для IE7, содержание центрируется и вертикально и горизонтально. IE7 имеет проблемы со своей моделью поля. Я полагаю, что IE8 разрешили их.
Центральное поле действительно центрируется вертикально в IE7, потому что я вложил 1 таблицу ячейки в центральном отделении как взлом вокруг проблем модели поля IE7. Я знаю, что это является немым и ужасным, но это должно было только показать, что работало.
Посмотрите его в действии - Полноэкранное Расположение на Три столбца
Я немного удивлен, что этот ответ не собирал единственное голосование или получал щедрость. Это работает, его простое, и это выполняет все OP, относительно которого попросили. О, хорошо.
DIV { text-align: center }
#h0, #f0 { float: left; clear: both }
#h1, #f1 { height: 100px; float: none; width: 800px }
#l0 { float: left; clear: left; }
#c0, #r0 { float: left; clear: none }
#l1, #r1 { width: 150px }
#c1 { width: 500px }
#l1, #r1, #c1 { height: 350px }
#h0, #f0 { background-color: orange }
#l0 { background-color: red }
#r0 { background-color: blue }
#c0 { background-color: yellow }
#h1, #f1, #l1, #r1, #c1
{ display: table-cell; vertical-align: middle; }
<div id="h0"><div id="h1">
header
</div></div>
<div id="l0"><div id="l1">
left column
</div></div>
<div id="c0"><div id="c1">
<img alt="dilbert (3K)" src="../gif/dilbert.gif" height="82" width="80" />
</div></div>
<div id="r0"><div id="r1">
right column
</div></div>
<div id="f0"><div id="f1">
footer
</div></div>
http://www.alistapart.com/articles/holygrail
Это должно быть точно, в чем Вы нуждаетесь.
Я нашел расположение Liquid двух столбцов в Floatutorial чрезвычайно полезным при установке полного расположения высоты двух столбцов - зафиксированный левый столбец с эластичным правым столбцом с заголовком и строкой ноги для начальной загрузки. В их примере они предполагают, что левый столбец используется в качестве навигации, но это могло быть что-либо.
С Floatutorial, мало того, что Вы вытаскиваете демонстрационную структуру HTML и CSS из нее, но когда Вы сделаны, Вы понимаете, почему Вы имеете то, с чем Вы заканчиваете.
Я кратко попробовал YUI: у разработчика Сеток как suggestd @JohannesH, и были некоторые небольшие проблемы с ним, но худшая проблема состоит в том, что это было столь замысловатым, что я понятия не имел, почему это не работало, или почему это, как предполагалось, сделало.
Править: существует также учебное руководство для жидкого расположения на три столбца (который я не использовал), и целый набор других учебных руководств то использование плавания.
В ответ на сообщение из исходного плаката вот то, как я сделал бы первый запрос с <таблица> (другие - тривиальные модификации):
<style>
body {
height: 100%;
}
#container {
height: 100%;
width: 100%;
border-collapse: collapse;
}
#top, #left, #center, #right, #bottom {
border: 1px solid black;
text-align: center;
vertical-align: center;
}
#left, #right {
width: 200px;
}
#top, #bottom {
height: 200px;
}
</style>
<table id="container">
<tr>
<td colspan=3 id="top">header</td>
</tr>
<tr>
<td id="left">left</td>
<td id="center">center</td>
<td id="right">right</td>
</tr>
<tr>
<td colspan=3 id="bottom">footer</td>
</tr>
</table>
Существует pre-fabbed объединенная энергосистема CSS, которая основана на Золотом правиле и реализует все типы форматов столбца вполне с готовностью. Проверьте 960 Объединенных энергосистем. Можно выполнить цели без использования таблиц. Хорошая вещь, что при помощи чистого решения CSS можно изменить расположение более быстро.
Существует также реализация жидкости jQuery, которая имеет жидкое расположение, которым можно интересоваться.
Это должно иметь все, в чем Вы нуждаетесь:
http://maxdesign.com.au/presentation/page_layouts/
И более общее решение всех Ваших проблем CSS:
вам следует ознакомиться с Elastic CSS Framework:
http://elasticss.com/two-columns-based-layout/
Ура.