Главная → Программирование → by

Равная высота колонками с границ и отрицательные поля в CSS

“ Что?Другой “ одинаковой высоты Columns” статьи?Хватит уже ”! Если это то, что вы думаете, то подумайте еще раз, потому что это решение different.

Это не полагаться на обычные трюки.Он не использует images, ни дополнительные markup, ни CSS3, ни псевдо-classes, ни Javascript, ни абсолютное positioning.Все это используется составляет border и negative margin.Обратите внимание, что эта статья также продемонстрирует различные методы конструкции и освежить несколько concepts.

1.Центрирование столбцов без обертки div

Этот макет будет построен без обертки div:

Two column layout

Basics

Мы используем фоне body, а граница одной из колонн для создания фоновых цветов, что вертикально заполнить “ row”.

Markup

<div id="header">
	<h2><a href="#">Header</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="sidebar">
	<h2><a href="#">Sidebar</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="main">
	<h2><a href="#">Main</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="footer">
	<h2><a href="#">Footer</a></h2>
	<p>Lorem ipsum...</p>
</div>

Tip: всегда включают в себя ссылки на вашем фиктивный текст, чтобы определить контекст стэка issues.

Об использовании тела в качестве оболочки:

  • Всегда стиль html с фоном для предотвращения фона организма от выходящие за его границы и быть окрашен по всей viewport.
  • Никогда не стиль html с height: 100% или фон тела будут окрашены не выше, чем viewport.

CSS

html {
  background: #9c9965;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header {
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
  background: #d4c37b;
}

#main {
  border-left: 200px solid #d4c37b;
}

#footer {
  clear: left;
  background: #9c9965;
}

Что делают эти правила точно

  • Мы стиле html с фоном, чтобы предотвратить браузера от живописи цвет фона body outside наши layout.
  • Мы стиле body с автоматической края к центру расположение, ширина устанавливается с помощью процентах.Фон декларации в течение #main.
  • Мы стиле фон #header замаскировать цвет фона тела (то же самое относится и к #footer).
  • Цвет фона #sidebar соответствующий цвет границы #main.Это трюк мы используем, чтобы сделать наши столбцы отображаются как равный height.
  • Нижний колонтитулы удаляет все предыдущие поплавок так, он остается под колоннами, в нижней части layout.

Если вы посмотрите на эту Первый step, you’ заметите, что движется в #sidebar не вертикально с заголовком в #main, и что мы имеем некоторый разрыв в верхней и нижней части #sidebar.Это потому, что из этих двух контейнерах, только одна блок форматирования context.Таким образом, поля не рухнуть в #sidebar в то время как они делают в #main.Это также означает, что #main не будет содержать поплавки и что применение clear:left любой вложенный элемент будет очистить #sidebar, как well.

Таким образом, чтобы предотвратить любую поплавка и маржа рушится вопросы мы делаем все основные боксы блока форматирования contexts.

#header,
#footer {
  overflow: hidden;
  zoom: 1;
}

#main {
  float: left;
}

#sidebar {
  margin-right: -200px;
}

Note: если вещи выглядят немного отличается в IE 6 и 7, это потому, что в этих браузерах default поля делают развал внутри блока форматирования контекстах.Следующие также должны быть рассмотрены:

  • overflow и zoom на #header и #footer сделать эти элементы нового форматирования блока contexts.
  • Для #main мы используем float, а не overflow чтобы предотвратить потенциальные проблемы, если мы должны были компенсировать часть вложенных content.
  • Отрицательная маржа держится #main на место, потому что теперь она является плавающей, ее границы окна появляется next к краю коробки #sidebar. (Отрицательный vlaue должны совпадать с размерностью сказал коробки)

Если вы посмотрите на второй step, you’ увидите, что граница #main кожа #sidebar.Это потому, что в контексте стэка.В потоке (дерево порядка), #main наступает после #sidebar, так что бывший перекрывает latter.

Позиционирование # боковой панели приносит его в stack.

#sidebar {
  position: relative;
}

Примечание: если вы сделаете #main новый содержащий блок you’ будем вернуться к исходному порядке стека.В этом случае, you’ должны будете использовать z-index держать #sidebar на вершине #main.

Если вы посмотрите на шаг three, you’ увидите, что мы почти у цели.Последний развлечениях в основном косметические.I’ ве вставлены стили базы sheet: 

<link rel="stylesheet" type="text/css" href="http://tjkdesign.com/ez-css/css/base.css">

, А затем добавил следующие правила: 

html {
  height: auto;
}

body {
  border: 1px solid #efefef;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom: 2em;
}

Зачем нам нужны эти правила

  • Мы можем сбросить высоту html, так что фон #main не отключение на линии сгиба (это стиль наследуется от листа база стилей)
  • Мы можем провести границу по всему layout.
  • Потому что лист база стилей устанавливает только верхний полей, мы можем создать пробелы в нижней части основной коробки через padding.

Примечание: правила для html показано здесь, но это имеет смысл remove это правило с листа база стилей, а не перезаписыватьДекларация here.

Это последний step для первого макета.Он опирается на эти простые правила: 

html {
  height: auto;
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
  border: 1px solid #efefef;
}

#sidebar {
  float: left;
  position: relative;
  width: 200px;
  margin-right: -200px;
  background: #d4c37b; /* color must match #main's left border */
}

#main {
  float: left;
  border-left: 200px solid #d4c37b; /* color must match #sidebar's background */
}

#header,
#footer {
  clear: left;
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#header,
#main,
#sidebar,
#footer {
  padding-bottom:2em;
}

2.Создание 2-цв-макета с двумя границами между columns

We’ создадите этом с одной оболочкой для наших двух столбцов, и мы хотим, чтобы нарисовать вертикальную границу между двумя columns.

Two column layout with two vertical borders

Basics

Обертку div позволяет нам быть немного более творческими здесь.Фон оболочки используется для рисования фона в один столбец, а его левая граница используется для рисования цвет фона другой колонке.Вертикальная граница будет сделано перекрытие правой границе левой колонке с левой границы правого column.

Примечание: если у вас есть использовать фиксированную ширину макета (по сравнению с жидкостью, как здесь), то оболочка может быть использована для создания двух цветов фона, а также вертикальные границы в то же время.Это делается с помощью левой границы для левой колонке, правая граница для правой колонки и фон для вертикальной границы.Да, это означает, что содержимое коробки шириной в один пиксель, а отрицательные поля используются тянуть столбцов в place.

Markup

<div id="header">
	<h2><a href="#">Header</a></h2>
	<p>Lorem ipsum...</p>
</div>

<div id="wrapper">
  <div id="sidebar">
  	<h2><a href="#">Sidebar</a></h2>
  	<p>Lorem ipsum...</p>
  </div>
  <div id="main">
  	<h2><a href="#">Main</a></h2>
  	<p>Lorem ipsum...</p>
  </div>
</div>

<div id="footer">
	<h2><a href="#">Footer</a></h2>
	<p>Lorem ipsum...</p>
</div>

CSS

Начнем с общих правил, по сравнению с предыдущим демо-версии: 

html {
  background: #45473f;
}

body {
  width: 80%;
  margin: 20px auto;
  background: #ffe3a6;
}

#header,
#footer {
  overflow: hidden;
  zoom: 1;
  background: #9c9965;
}

#sidebar {
  float: left;
  width: 200px;
}

#main {
  float: left;
}

К которому мы добавляем position: relative: 

#wrapper {
  display: inline-block;
  border-left: 200px solid #d4c37b;
  position: relative;
}

#sidebar {
  margin-left: -200px;
  position: relative;
}

Примечание: нет необходимости использовать clear на нижний колонтитулы, поскольку #wrapper contains как floats.

Comments are closed.