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




15 Answers

Si desea establecer la altura de un <div> o cualquier elemento, debe establecer la altura de <body> y <html> en 100% también. A continuación, puede establecer la altura del elemento con 100% :)

Aquí hay un ejemplo:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}
pantalla ajustar alto

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.




Puedes 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*/
}



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>




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'});
    }
});



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%;
}



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 .




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 .




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

Ejemplo de 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>




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

height:100vh;



Prueba esto - probado

body {
  min-height: 100%;
}

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



Prueba el siguiente css:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}



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

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



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>




Este material cambiará el tamaño de la altura del contenido automáticamente de acuerdo con su navegador. Espero que esto funcione para tí. Solo prueba este ejemplo dado abajo.

Tienes que configurar solo la height:100% .

  html,body {
  height:100%;
  margin:0;
}
.content {
  height:100%;
  min-height:100%;
  position:relative;
}
.content-left {
  height:auto;
  min-height:100%;
  float:left;
  background:#ddd;
  width:50%;
  position:relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll     #aaa;
  width:50%;
  position:relative;
  float:left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width:50%;
  float:left;
  position:relative;
  overflow-y:scroll;  
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>




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.






Related