[Html] Cómo hacer un div 100% de altura de la ventana del navegador?



Answers

Si desea establecer el alto de un <div> o cualquier elemento, debe establecer la altura de <body> y <html> al 100% también. Entonces puedes establecer la altura del elemento con 100% :)

Aquí hay un ejemplo:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
Question

Tengo un diseño con dos columnas: un div izquierdo y un div derecho.

El div correcto tiene un color de background-color gris, y necesito que se expanda verticalmente según la altura de la ventana del navegador del usuario. En este momento, el background-color termina en la última parte del contenido en ese div .

Probé la height:100% , min-height:100%; etc.




Esto es lo que funcionó para mí:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

Utilice la position:fixed lugar de position:absolute , de esa manera, incluso si se desplaza hacia abajo, la división se expandirá hasta el final de la pantalla.




Prueba esto - probado:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}



Más fácil:

html,
body {
  height: 100%;
  min-height: 100%;
}
body {
  position: relative;
  background: purple;
  margin: 0;
  padding: 0;
}
.fullheight {
  display: block;
  position: relative;
  background: red;
  height: 100%;
  width: 300px;
}
<html class="">

<body>
  <div class="fullheight">
    This is full height.
  </div>
</body>

</html>




No mencionas algunos detalles importantes como:

  • ¿El diseño es de ancho fijo?
  • ¿Hay una o ambas columnas de ancho fijo?

Aquí hay una posibilidad:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}
<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

Hay muchas variaciones en esto dependiendo de qué columnas necesitan ser reparadas y cuáles son líquidas. También puedes hacer esto con un posicionamiento absoluto, pero generalmente he encontrado mejores resultados (particularmente en términos de navegación cruzada) usando flotantes.




Esto funcionó para mí:

html, body {
    height: 100%; /* IMPORTANT!!! stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* min. height for modern browser */
    height:auto !important; /* important rule for modern Browser */
    height:100%; /* min. height for IE */
    overflow: hidden !important; /* FF scroll-bar */
}

Tomado de esta página .




Si usas position: absolute; y jQuery, podrías usar

$("#mydiv").css("height", $(document).height() + "px");



Puede usar la unidad view-port en CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height:100vh; /*vh stands for view-port height, 1vh is 1% of screen height*/
}



Agregue min-height: 100% y no especifique una altura (o póngalo en automático). Me hizo totalmente el trabajo:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}



Aunque esta solución se hace con jQuery, creo que puede ser útil para cualquier persona que haga columnas para ajustarse al tamaño de la pantalla.

Para las columnas que comienzan en la parte superior de la página, esta solución es la más simple.

body,html{
  height:100%;
}

div#right{
  height:100%
}

Para columnas que no están comenzando en la parte superior de la página (por ejemplo: si comienzan debajo del encabezado).

<script>
     $(document).ready(function () {
        var column_height = $("body").height();
        column_height = column_height - 100; // 100 is the header height
        column_height = column_height + "px";
        $("#column").css("height",column_height);
    });
</script>

El primer método aplica la altura del cuerpo y las columnas también, lo que significa que está comenzando_píxeles + height100% .

El segundo método obtiene la altura de la página que se muestra al usuario obteniendo la altura del cuerpo y luego resta el tamaño del encabezado para saber cuánta altura queda para mostrar la columna.




Una de las opciones es usar una tabla CSS. Tiene un gran soporte de navegador, incluso funciona en IE8.

Ejemplo JSFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>




100vw === 100% del ancho de la ventana gráfica.

100vh === 100% de la altura de la ventana gráfica.

Si desea establecer el ancho o la altura div 100% del tamaño de la ventana del navegador, debe usar

para ancho: 100vw

para la altura: 100vh

o si desea establecer un tamaño más pequeño use la calc function css calc function . Ejemplo:

#example { width: calc(100vw - 32px) }




Los elementos de bloque consumen todo el ancho de sus elementos principales, de forma predeterminada.

Así es como cumplen con sus requisitos de diseño, que es apilar verticalmente.

9.4.1 Contextos de formato de bloques

En un contexto de formato de bloques, los recuadros se disponen uno detrás del otro, verticalmente, comenzando en la parte superior de un bloque contenedor.

Este comportamiento, sin embargo, no se extiende a la altura.

Por defecto, la mayoría de los elementos son el alto de su contenido ( height: auto ).

A diferencia del ancho, debe especificar una altura si desea espacio adicional.

Por lo tanto, tenga estas dos cosas en mente:

  • a menos que desee ancho completo, necesita definir el ancho de un elemento de bloque
  • a menos que desee la altura del contenido, necesita definir la altura de un elemento

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */
<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>






Links