Aplicando CSS
a un sitio, me surgió la duda en CSS
al momento de querer definir un tamaño variable de un contenedor HTML
.
¿Cuál es el uso apropiado para usar vh/vw o porcentaje %, en que casos conviene utilizar una y en cuales otros la otra ?
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadvh
(Viewport Height)Medición basada en la altura de la pantalla. Por ejemplo si damos una altura a un elemento de height: 100vh;
, este elemento tendrá la misma altura que la pantalla.
vw
(Viewport Width)Medición basada en lo ancho de la pantalla. Por ejemplo si damos un ancho a un elemento de width: 100vw;
, este elemento tendrá lo mismo ancho que lo ancho que la pantalla.
%
(Porcentaje)Medición basado en porcentaje. La medición en porcentaje será definida en relación a su elemento padre, a menos que éste se acompañe de una posición fija (position:fixed;
) o absoluta (position:absolute;
), que entonces en este caso su comportamiento ahora también respetará el tamaño de la pantalla.
var docH = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var viewportH = document.querySelector('.vh-height').offsetHeight;
var percentH = document.querySelector('.percent-height').offsetHeight;
var dhOut = document.getElementById('doc-height');
var vhOut = document.getElementById('vh-height');
var pctOut = document.getElementById('percent-height');
dhOut.innerHTML = docH;
vhOut.innerHTML = viewportH;
pctOut.innerHTML = percentH;
body {
background-color: #cbcbcb;
}
#parent{
height:130px;
width:400px;
overflow: auto;
background-color: #eee;
}
.child{
width: 50%; /* 50% de ancho del elemento parent */
color: #fff;
}
.vh-height{
float:left;
height:100vh; /* 100% de altura de viewPort */
background-color:royalblue;
}
.percent-height{
float:right;
height:100%; /* 100% de altura pero relativamente a su elemento padre */
background-color:brown;
}
uno
<div id="parent">
<div class="child vh-height">dos</div>
<div class="child percent-height">tres</div>
</div>
(uno) Altura del Documento/Viewport: <span id="doc-height"></span><br/>
(dos) Altura del Viewport: <span id="vh-height"></span><br/>
(tres) Altura en Porcentaje (igual > altura del parent): <span id="percent-height"></span><br/>
También puedes ver este ejemplo en jsFiddle
position:absolute
y un ancho en porcentajes no es relativo a la pantalla sino a su ancestro posicionado más cercano a no ser que no haya ninguno.
position:relative;
, ya no será relativo a la pantalla pero sí a ese elemento envoltorio, y su posicionamiento top/left/etc
también. Pero si ninguno de los envolturos tiene ese estilo, será relativo a la pantalla.
Es totalmente distinto usar viewports (vw/vh) que porcentajes (%)
Ejemplo con misma cantidad con las dos unidades: 60vw vs 60%
vw/vh: Esta unidad depende del tamaño del viewport, que es la ventana de visualización de donde se ve la página.
Ejemplo: Si mi navegador lo tengo abierto con un tamaño de 800px de ancho, 100vw serían 800px.
Porcentaje %: Esta unidad es el porcentaje de tamaño del contenedor padre o relativo a este.
Ejemplo: Tengo un de 1000px de ancho que contiene a adentro con width: 20%, este medirá 200px.
Te dejo un codepen para que veas la diferencia jugando con el tamaño de la pantalla: https://codepen.io/bitxelus/pen/MvJGpZ
vw y wh h son medidas relativas de acuerdo a la pantalla,
vw (viewport width): define el tañamano dependiendo de el ancho de la pantalla
wh (viewport high): define el tamaño dependiendo el largo de la pantalla
1vw o 1vh representan el 1 porciento de la altura o de la anchura respectivamente.
El % es la medida relativa de acuerdo a el contenedor, si el div padre tiene un tamaño de 500px y le colocas un width de 100% a un contenedor hijo este medirá 500px, si le colocas 50% este medirá 250px.