Как сделать, чтобы слой целиком был ссылкой?

В этой статье мы расскажем о том, как сделать целый слой ссылкой, это может быть любой div(блок, другими словами).

Тэг ссылки <a>, как известно не является блочным элементом, в связи с этим невозможно сделать ссылкой какой-то слой, например прямоугольную область. А необходимость такая появляется довольно часто.

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

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

На помощь тут приходит небольшая хитрость. Для начала создадим заготовку HTML-разметку, которая будет состоять из <div> внутри которого будет помещена ссылка <a>, внутри которой будет какой-то текст:

	<div>
		<a href="/">
			Содержание слоя-ссылки
		</a>
	</div>

Следующий наш шаг, задать какие-то размеры для внешнего <div>. Для внутреннего тэга <a> зададим свойство display, со значением block, что позволит работать с ссылкой, как со слоем. По умолчанию такие слои занимают всю ширину, но не всю высоту, поэтому так же добавим свойство height, со значением 100%. Для наглядности добавим фоновый цвет ссылке.

div {
	height:300px;
	width:400px;
}
	div a {
		display:block;
		height:100%;
		background:#CC3333;
	}

Результат можно наблюдать ниже, получилась прямоугольная область-ссылка, это видно при наведении на нее(курсор меняется на указатель), и по цвету слоя-ссылки.