Ajustar margin-top en DIVs relativos

Desarrollando una nueva web, donde necesitaba que el header (donde va el logo, los menús, etc.) sea de un alto auto-ajustable (que se ajuste según el contenido) y esté en posición fija/relativa para que el siguiente div no quede escondido detrás de el header, me encontré con un inconveniente.

El problema

Si tienes un conocimiento básico de CSS, sabrás que no se le pueden asignar dos «posiciones» a un mismo elemento, es decir, mi header no podía ser relative y fixed al mismo tiempo.

Lo cierto es que:

1. Ni al header le podía establecer una altura (debe ser auto-ajustable, especialmente porque es responsive).
2. Ni al siguiente div con posición relativa le podía establecer un margin-top respecto al header.

El problema principal es que un contenedor fijo-flotante no es, por lógica, un contenedor relativo.

¿Cómo lo resolví?

Lo primero que hice fue poner una altura automática del header (div) y padding arriba y abajo, más otros estilos, como una posición fija:

/*CSS*/

.header {
	width: 100%; /*el div ocupará toda la pantalla*/
	height: auto; /*altura automática*/
	padding-top:7px; /*padding arriba*/
	padding-bottom:7px; /*padding abajo*/
	position: fixed; /*posición fija*/
	left: 0; /*que no haya espacio a la derecha*/
	top: 0; /*ni espacio arriba*/
	background-color: #FFFFFF; /*fondo blanco*/
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); /*una sombra*/
	z-index: 9999; /*quiero que sea la "capa" más alta*/
}

A continuación, a el contenedor «inicio» (el que incluye el texto y el fondo) le di una posición relativa, entre otros estilos:

/*CSS*/

.inicio {
	width: 100%; /*el div ocupará toda la pantalla*/
	height: auto; /*altura automática*/
	padding-top:90px; /*padding arriba*/
	padding-bottom:90px; /*padding abajo*/
	margin-bottom:0; /*no tendrá margen respecto al contenedor inferior*/
	position: relative; /*ya sabes*/
	z-index: 2; /*este contenedor será una "capa" inferior al header*/
	/* otros estilos */
	background-image:url(fondo-inicio.jpg);
	background-position:center;
	background-color: #2F2F2F;
	background-size:cover;
}

Después de eso, lo único que quedaba por añadir es el toque de Javascript/jQuery que nos salvará de tener que especificar una altura y de estar ajustando media-queries.

//Javascript

$('.inicio').css({'margin-top': $('.header').outerHeight()});

¿Cómo funciona ese código?

Lo que hace es agarrar al contenedor inicio (o como sea que se llame) y con la propiedad CSS de jQuery (.css) le añade un margin-top de la altura exterior (.outerHeight) de nuestro header.

El resultado, con ese código añadido, es este:

Conclusión:

Con unas simples líneas de código hemos podido hacer que el contenedor posterior al header no quede escondido tras nuestro contenedor flotante.

Espero que el tutorial haya sido de utilidad. Nos leemos, ¡saludos!