Здесь вы найдете ответ на вопрос, как сделать ссылкой не только строку текста, а весь блок целиком.
Довольно часто необходимо сделать кликабильным не только текст ссылки, но и весь блок. Например настраивать для менюшку или прочую навигации по сайту. Хочу отметить тот факт, что мы будем рассматривать случай, когда не создается просто блок с заданными размерами, состоящий из тега ссылки а. мы будем расширять этот контейнер до размеров родительского блока. Это будет более грамотно с точки зрения семантики.
Чтобы реализовать нашу задумку, в первую очередь необходимо для ссылки определить свойства блочного элемента, используя свойство display. Благодаря этому ширина рассматриваемого контейнера растянется до размеров родителя — это одно из характерных свойств блочных элементов. Для того, чтобы растянуть ссылку по высоте родителя, необходимо воспользоваться свойством height, для которого определим значение 100%. Вот таким образом должен будет выглядеть код:
CSS
a { display: block; height: 100%; }
В браузере выскочит такая картина
Синим помечен блок с ссылкой. При клике на любую точку в синей зоне произойдет переход по заданному адресу.
