Высота div 100%

Занимаясь вёрсткой сайтов, часто сталкиваюсь с необходимостью задать div’у высоту 100%. Возможно, существует способ решить эту задачу с помощью одного лишь CSS, но мне такие знания пока ещё не подвластны. Поэтому я успешно использую способ на jQuery и вполне им удовлетворён.

Рассмотрю несколько случаев. Всё предельно просто.

1. Статичная 100%-ая высота div’а

$(document).ready(function() {
   $('div').height( $(window).height() );
});

При загрузке страницы наш div примет высоту окна браузера. Но есть нюанс — при изменении высоты окна после того, как страница уже загрузилась, высота div’а останется такой, какой она была на момент загрузки. Этого решения может быть недостаточно, поэтому его можно усовершенствовать — сделать так, чтобы высота div’а автоматически подстраивалась под изменяемую высоту окна браузера.

2. Резиновая 100%-ая высота div’а

$(document).ready(function() {

      heightResponsive( $('div') ); //вызываем функцию
				
      $(window).resize(function() {
         heightResponsive($('div')); //вызываем функцию при ресайзе
      });
	
      function heightResponsive() {
	 $('div').height( $(window).height() );
      }

});

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

Например, если у нас есть конструкция вида:

<div class="parent">
   <div class="child">
       
   </div>
</div>

то растянуть div.child по высоте мы сможем аналогично выше приведённым примерам:

$(document).ready(function() {

      heightResponsive( $('div.child') ); //вызываем функцию
				
      $(window).resize(function() {
         heightResponsive($('div.child')); //вызываем функцию при ресайзе
      });
	
      function heightResponsive() {
	 $('div.child').height( $('div.parent').height() );
      }

});

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