Crear un header perfecto y adaptable

[ilu7ionHD]

Hola, quiero posteriormente usar resposive web o lo que yo entiendo por "responsive web" jaja usar las media @querry.

Así que supongo que el header tiene tiene que ser en porcentajes.
¿Como hago un header que ocupe el 15% total de la pantalla, y 100% con respecto al largo, que sea de color tengo, que adentro a la izquierda incluya un logo con fondo transaparete (.png) y a la derecha tenga <li> que usare como links a otras páginas. Esto lo quiero crear una vez sola y luego por cada página PHP usar include

Saludos

[DesgraciadoGabo]

para solucionar el alto del header solo asignale un height:15vh y width:100% no hay mayor dificultad y ya dentro de header colocas tu logo y los li.

saludos!

[ilu7ionHD]

porque vh y no % ?

[DesgraciadoGabo]

https://jsfiddle.net/twzcfqee/

[ilu7ionHD]

Entiendo! Muchas gracias!.
Lo que no entiendo es porque no toma el 15% de la pantalla, como funciona? en que se basa para ese 15%

[DesgraciadoGabo]

[SegúnYo]
Porque así como esta estructurado el código ¿en base al alto de qué tomará un 15%? en todo caso sería del alto del body, pero el body que alto tiene? tal parece que es el alto del contenido, veamos este ejemplo, si hay un div que lo contiene y este sí tiene un alto definido si funciona poner un alto en porcentaje.
https://jsfiddle.net/twzcfqee/1/
[/SegúnYo]

Antes eso de definir un alto al 100% o 50% de la pantalla se hacia con jquery y el vh vino a salvar muchas vidas!!
Compatibilidad:
http://caniuse.com/#feat=viewport-units

Saludos!!!

[ilu7ionHD]

Hola! muy muy pero muy claro!.
Muchas gracias

[mardojai]

También lo puedes hacer usando %, pero primero tienes que decirle al html y body que tomen todo el alto.

Código CSS:

html, body {
    height:100%;
}
 

Saludos!

[ilu7ionHD]

Serìa asì?

Código CSS:

html, body {
    height:100%;
    width:100%;
}