html tamaño - Haz un div 100% de altura de la ventana del navegador.





height of (25)


Agregue min-height: 100% y no especifique una altura (o póngala en auto). Hizo el trabajo totalmente para mí:

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

Tengo un diseño con dos columnas: un div izquierda y un div derecha.

El div derecho tiene un color de background-color gris, y lo necesito para expandir verticalmente dependiendo de la altura de la ventana del navegador del usuario. En este momento, el background-color termina en la última parte del contenido en esa div .

He intentado la height:100% , min-height:100%; etc.




Hay un par de unidades de medida CSS3 llamadas:

Viewport-Porcentaje (o Viewport-Relative) longitudes

¿Qué son las longitudes visuales-porcentuales?

De la Recomendación del candidato W3 enlazada arriba:

Las longitudes porcentuales de la ventana gráfica son relativas al tamaño del bloque inicial que contiene. Cuando se cambia la altura o el ancho del bloque que contiene inicial, se escalan en consecuencia.

Estas unidades son vh (altura de la ventana vmin ), vw (ancho de la ventana vmin ), vmin (longitud mínima de la ventana vmin ) y vmax (longitud máxima de la ventana vmin ).

¿Cómo se puede usar esto para hacer que un divisor llene la altura del navegador?

Para esta pregunta, podemos hacer uso de vh : 1vh es igual al 1% de la altura de la ventana 1vh . Es decir, 100vh es igual a la altura de la ventana del navegador, independientemente de dónde se encuentre el elemento en el árbol DOM:

HTML

<div></div>

CSS

div {
    height:100vh;
}

Esto es, literalmente, todo lo que se necesita. Aquí hay un ejemplo de JSFiddle en uso.

¿Qué navegadores soportan estas nuevas unidades?

Esto se admite actualmente en todos los navegadores principales actualizados, aparte de Opera Mini. Echa un vistazo a ¿Puedo usar ... para obtener más ayuda.

¿Cómo se puede usar esto con múltiples columnas?

En el caso de la pregunta en cuestión, con un divisor izquierdo y derecho, aquí hay un ejemplo de JSFiddle que muestra un diseño de dos columnas que incluye vh y vw .

¿Cómo es 100vh diferente al 100% ?

Toma este diseño por ejemplo:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

La etiqueta p aquí se establece en 100% de altura, pero debido a que su div contiene 200px de altura, el 100% de 200px se convierte en 200px, no el 100% de la altura del body . Usar 100vh en 100vh lugar significa que la etiqueta p será 100% de altura del body independientemente de la altura div . ¡Echa un vistazo a este JSFiddle que acompaña para ver fácilmente la diferencia!




 html

   //vw: hundredths of the viewport width.
   //vh: hundredths of the viewport height.
   //vmin: hundredths of whichever is smaller, the viewport width or height.
   //vmax: hundredths of whichever is larger, the viewport width or height.   

<div class="wrapper">
  <div class="left">
  Left
  </div>
  <div class="right">
    right
 </div>
</div>

css

<style>
  .wrapper {     
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height:100vh; // height window (vh)

  }
  .wrapper .left{
     widht:80%; // width optional but recommended 
    }
  .wrapper .right{
     widht:20%; // width optional but recommended 
     background-color: #dd1f26;
    }
<style>



En realidad, lo que funcionó mejor para mí es usar la propiedad vh, en mi aplicación de reacción en quería que el div coincidiera con el máximo de la página, incluso cuando se redimensionó la altura intentada : 100%; , desbordamiento-y: auto; , ninguno de ellos funcionó al establecer la altura: (su porcentaje) vh; funcionó como se esperaba. Nota: si está usando relleno, esquinas redondeadas, etc., asegúrese de restar esos valores de su porcentaje de propiedad vh o agregar altura extra y hacer que aparezcan barras de desplazamiento, aquí está mi ejemplo:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);

}



Puedes usar display: flex y height: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>




Prueba esto - probado

body {
  min-height: 100%;
}

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



Necesitas hacer dos cosas, una es establecer la altura al 100% que ya hiciste. Segundo se establece la posición en absoluto. Eso debería hacer el truco.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

Source




Aunque esta solución se realiza con jQuery I, puede ser útil para cualquier persona que haga columnas para ajustar el 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 sencilla.

body,html{
  height:100%;
}

div#right{
  height:100%
}

Para las columnas que no comienzan 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 a él y también a las columnas, lo que significa que es starting_pixels + height100% .

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




Todas las demás soluciones, incluida la mejor votada con vh son subóptimas en comparación con la solución del modelo flexible .

Con la llegada del modelo CSS flex , resolver el problema del 100% de altura se vuelve muy, muy fácil: use height: 100%; display: flex height: 100%; display: flex en el elemento principal y flex: 1 en los elementos secundarios. Automáticamente ocuparán todo el espacio disponible en su contenedor.

Tenga en cuenta lo simples que son el marcado y el CSS. No hay hacks de mesa ni nada.

El modelo flex es compatible con todos los principales navegadores , así como con IE11 +.

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

Aprenda más sobre el modelo flex aquí.




No mencionas algunos detalles importantes como:

  • ¿Es la disposición de ancho fijo?
  • ¿Alguna o ambas columnas tienen un 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 fijas y cuáles son líquidas. También puede hacer esto con posicionamiento absoluto, pero en general he encontrado mejores resultados (particularmente en términos de navegador cruzado) usando flotadores en su lugar.




Si eres capaz de posicionar absolutamente tus elementos,

position: absolute;
top: 0;
bottom: 0;

Lo haría.




Utilizar FlexBox CSS

Flexbox es un ajuste perfecto para este tipo de problema. Si bien es más conocido por distribuir el contenido en la dirección horizontal, Flexbox en realidad funciona igual de bien para problemas de diseño vertical. Todo lo que tiene que hacer es envolver las secciones verticales en un contenedor flexible y elegir cuáles desea expandir. Automáticamente ocuparán todo el espacio disponible en su contenedor.




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 .




Los elementos de bloque consumen todo el ancho de su padre, de forma predeterminada.

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

9.4.1 Contextos de formato de bloque

En un contexto de formato de bloque, los cuadros se colocan uno tras otro, verticalmente, comenzando en la parte superior de un bloque contenedor.

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

De forma predeterminada, la mayoría de los elementos son la altura de su contenido ( height: auto ).

A diferencia de la anchura, debe especificar una altura si desea espacio adicional.

Por lo tanto, tenga en cuenta estas dos cosas:

  • a menos que desee un ancho completo, debe definir el ancho de un elemento de bloque
  • a menos que desee altura de contenido, debe 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>




Aquí hay una solución para la altura.

En tu uso de CSS:

#your-object: height: 100vh;

Para el navegador que no soporta vh-units , use modernizr.

Agregar este script (para agregar detección para vh-units )

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

Finalmente, use esta función para agregar la altura de la vista a #your-object si el navegador no admite vh-units :

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});



Aquí hay algo que no es exactamente como lo que tenía arriba, pero podría ser útil para algunos.

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/




Puedes usar el siguiente CSS para hacer un div 100% de la altura de la ventana del navegador:

display: block;
position: relative;
bottom: 0;
height: 100%;



Hay varios métodos disponibles para establecer la altura de un <div> al 100%.

Método (A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>

Método (B) utilizando vh:

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>

Método (c) usando la caja de flexión:

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}
<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>




simplemente use la unidad "vh" en lugar de "px", que significa altura de puerto de vista.

height:100vh;



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>




Trate de establecer la height:100% en html y body

html, 
body {
    height: 100%;
}

Y si desea 2 div divisen el mismo uso o establezca la display:flex elemento padre display:flex propiedad display:flex .




Puede usar vh en este caso que es relativo al 1% de la altura de la ventana gráfica ...

Eso significa que si desea cubrir la altura, simplemente use 100vh .

Mira la imagen que dibujo para ti aquí:

Prueba el fragmento que he creado para ti de la siguiente manera:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>




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

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

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

de ancho: 100vw

de 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) }




Esto es lo que funcionó para mí:

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

Use position:fixed lugar de position:absolute , de esa forma, incluso si se desplaza hacia abajo, la división se expandirá al final de la pantalla.




display: inline-block agrega un margen extra a su elemento.

Yo recomendaría esto:

#element {
    display: table; /* IE8+ and all other modern browsers */
}




html css css3 height