В данной статье рассказывается о том, как можно оперировать позициями и размерами в CSS, чтобы создавать блоки и решать типичные задачи дизайна. Также здесь будет показано, как можно через позиционирование определить размеры блока.

Постановка задачи

Итак, чтобы вникнуть в суть этих двух параметров свойств CSS предлагаю использовать практический пример. Для этого поставим перед собой следующую задачу: создать такой блок, у которого сверху, слева и справа установлены отступы по 20 пикселей до границ родительского элемента. Снизу от рассматриваемого блока должен быть отступ, который занимает половину высоты родителя. Ниже представлена схема, которая показывает, что должно получиться в итоге:

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

Решение

Решение нашей задачи будет основываться на применении абсолютного позиционирования. Однако тут же может возникнуть вопрос, как же можно использовать такой тип позиционирования при неизвестной стороне? Можно! Стоит только шире посмотреть на проблему, так как размер можно определить не только с помощью свойств width и height. Нашей проблеме помогут функции top, right, bottom и left.

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

HTML

        <div class="block0">
		<div class="block"></div>
	</div>

CSS

.block0 {
	display:block;
	width:300px;
	height:300px;
	margin:30px auto 0px auto;
	background:#d4d8ff;
	position:relative; /* этот родительский блок
        нужен только для визуализации того,
        что все условия поставленной задачи соблюдены */
	}
.block {
	position:absolute;
	top:20px;
	bottom: 50%; /* установит отступ ровно в
        половину от высоты родителя */
 	right: 20px;
	left: 20px;
	background:#679bce;
	}

Мы получим следующую картину в браузере

Сравнивая исходно поставленную задачу (картинку схемы правильного решения) и полученный результат, можно сделать вывод, что задача решена.

Однако не стоит забывать про старичка Internet Explower, он как обычно требует индивидуального подхода. Чтобы старичок справился с задачей, выдадим ему «костыли»

CSS

html .box{
	height: expression( parentNode.offsetHeight/2 - 20 + 'px');
	width: expression( parentNode.offsetWidth - 40 + 'px');
}

Теперь поясняю смысл кода! Первая строка содержит указания, что высота потомка не должна превышать половину аналогичного параметра у родителя, причем не забываем отступ сверху, равный 20 пикселям. Вторая строка прописывает ширину нашего блока, с учетом левого и правого отступа.

Стоит отметить, что для реальных условий при использовании «костылей» необходимо создавать отдельный файл с CSS-кодом, который будет подшит к документу условным комментарием.
Стоит отметить, что это не наиболее рациональный вариант оптимизации работы IE, однако при нынешних условиях развития браузера (которых вообще нет, так как Microsoft перестал выпуск этого продукта) можно закрыть на это глаза и пользоваться первоначальным вариантом.

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

CSS

 html .box{
z-index: expression( /* оптимизированный expression,
который сработает только при загрузке страницы */
runtimeStyle.zIndex = 1,
runtimeStyle.height = parentNode.offsetHeight/2 - 20 + 'px');
}

Где можно применить такое решение?

Это конечно все отлично, но возникает вполне законный вопрос зачем это знать и где можно применить?

Иметь в арсенале такой прием никогда не помешает, а применить это можно при использовании декоративных бэкграундных картинок. Причем стоит отметить, что этот элемент будет оптимизирован под любое разрешение экрана, так как он имеет абсолютное позиционирование (прием работает и при position: fixed;).

В каких браузерах работает?

Выводы

Подводя итог, следует обратить внимание на то, что размеры блока не всегда определяются свойствами width и height. Можно использовать абсолютное позиционирования и сопутствующие элементы. Также, не стоит забывать, что для работы приема в Internet Explower следует прописать функцию expression. Кроме того, родительский блок должен быть позиционирован, как relative. В некоторых случаях это вызывает определенные неудобства. Несомненно, применение этого способа не слишком распространено, однако иногда это знание принесет большую пользу.