Height 100% métodos alternativos con CSS3 by @espaibarcelona

fuente: https://www.espai.es/blog/2017/02/height-100-css/

Seguramente ya sabréis que para determinar el “tamaño” de un elemento en css podemos utilizar unidades como los píxeles, puntos, porcentajes o incluso em. Pero quizá no hayáis oído hablar de las unidades vh y vw.  Una unidad vh (viewport height) equivale a un 1% de la altura del viewport (el total de la pantalla del dispositivo que muestre nuestra web). 1vh = 1% del total de la pantalla, 100vh = 100%. Como os habréis imaginado, la unidad vw es el equivalente para el ancho.

Usando estas unidades podemos determinar una altura fullheight de la siguiente manera:

1
2
3
4
5
.fullHeight {
height: 100vh;
}

Leer artículo completo en ESPAI.ES

Javascript: calcular el tamaño de la ventana del navegador

Buenas a tod@s

Si necesitais saber que tamaño tiene la ventana del navegador (ancho y alto) para por ejemplo mostrar unos estilos CSS u otros con javascript porque por lo que sea con CSS no podeis … este es vuestro codigo:

 

function tamVentana() {
  var tam = [0, 0];
  if (typeof window.innerWidth != 'undefined')
  {
    tam = [window.innerWidth,window.innerHeight];
  }
  else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth !=
      'undefined' && document.documentElement.clientWidth != 0)
  {
    tam = [
        document.documentElement.clientWidth,
        document.documentElement.clientHeight
    ];
  }
  else   {
    tam = [
        document.getElementsByTagName('body')[0].clientWidth,
        document.getElementsByTagName('body')[0].clientHeight
    ];
  }
  return tam;
}

Un saludo

#CSS div height: 100% – Alto de capa para chrome, firefox y explorer by @zoneartcss

Fuente: zoneartcss.com

Bua…. como lo dice el titulo… porfin una solucion, sino la correcta, supongo que la unica por el momento… (y si me equivoco manda la tuya haciendo click aqui), y siempre que necesitamos dar esteefecto en nuestros diseños… acabamos haciendolo con javascript… o si tenemos un diseño fijo, estatico, pues optamos por el uso de una imagen de fondo… que no es lo mas conveniente en algunas ocaciones pero si nos ahorra horas y frustraciones pero bueno. eh aqui la solucion para igualar nuestras columnas, cuando estan dentro de un div contenedor… y dar el efecto de divs relativamente iguales en su altura...

Al lio… tenemos nuestro div contenedor (class=”all”) y dentro tenemos otros 2 div ‘s (class=”contenido” y class=”lateral”) y queremos que tengan la misma altura cubriendo asi el 100% del contenedor (class=”all”)… entonces el html es:…

<div class="all">
    <div class="contenido">
        <p>nuestra primera columna</p>
    </div>
    <div class="lateral">
        <p>nuestra segunda columna.</p>
    </div>
</div>

Ahora para dar el efecto necesitamos hacer uso del “overflow” para que nos oculte el scroll que nos da el “padding” y el “margin“, que son ridiculamente enormes y nos da mucha altura.

.all{overflow:hidden;}
.contenido, .lateral{float:left;padding-bottom:30000px;margin-bottom:-30000px;}

Click para ver demo en linea

#CSS height: 100% – Alto de capa que sea el de la ventana del navegador SOLO PARA EXPLORER by @deswebcom

Fuente : Miguel Angel Alvarez – desarrolloweb.com

Este ejemplo SOLO FUNCIONA en EXPLORER

Necesitaba un div que fuera tan alto como el total de la web (vamos, como el contenido) y olvidarme de medir y esas cosas tan divertidas

El titulo de este post me llevo a dudar hasta que probe el ejemplo, pense que me haria el div tan alto como la ventana del navegador y luego no seguiria alargandose con el contenido de la web … pero afortunadamente se estira hasta el infinito y mas alla!!

Aqui os dejo el ejemplito, perdonad mi explicacion enrevesada pero ahora os haceis una idea de porque me echaron de la real academia de la lengua, verdad? …


<html>
<head>
<title>maquetado CSS utilizando todo el height</title>

<style type="text/css">
html,body{
margin:0px;
height:100%;
}
</style>

</head>
<body>

<div id="map" style="height: 100%;background-color:#ffff99;">Contenido que tiene que ocupar todo el espacio del navegador.</div>

</body>
</html>