¿Cómo se puede estirar un div que a la altura de la página 100%?

StackOverflow https://stackoverflow.com/questions/951712

  •  11-09-2019
  •  | 
  •  

Pregunta 

<html>
    <head>
        <style>
            .100PercentHeight{ }
        </style>

        </style>

    <body>
        <div class='100PercentHeight'>hihi</div>
    </body>
</html>

¿Cómo puedo estirar div a la altura del 100% de la página?

¿Fue útil?

Solución

Trate (que debería funcionar en la mayoría de los navegadores): 

.100PercentHeight, html, body {
    height : auto !important; /* Ignored by Internet Explorer, applied everywhere else. */
    height : 100%;            /* Internet Explorer treats as min-height. */
    min-height : 100%;        /* Internet Explorer ignores this. */
}

Otros consejos

La aplicación 

html, body, .100PercentHeight{
    height:100%;
}

debería producir el efecto que buscas. Que lo necesite en los tres.

Sin embargo, a menudo no realmente hacer lo que creo que puede, y puede ser problemático. técnicas Faux-columna o "pies de página pegajosos" tienden a trabajar mejor. 

<style>
.100PercentHeight{margin:0; height:100%}

</style>

Esto funcionará, como un ejemplo. 

<div style="width:100%; height:100%; border-style:solid; border-width:5px;">
  test
</div>

Si desea hacerlo a través de este código JavaScript debe funcionar para la mayoría de los navegadores DOM ... 

<div id="fullDiv" style="border: solid 2px black;">
    Hello example
</div>

<script type="text/javascript">

    var div = document.getElementById('fullDiv');

    div.style.height = document.documentElement.clientHeight + 'px';

</script>

Se debe ajustar la altura del 100% para el cuerpo y se debe hacer: 

body {
...
height:100%;
...
}

html {
    height: 100%;
}

Esto no funcionará si tiene un DOCTYPE. Estoy buscando una respuesta demasiado, pero tengo un DOCTYPE. Sin embargo, hay una manera de hacerlo con un DOCTYPE, pero no funciona con dos divs flotante a la izquierda y la derecha al lado de fuerza, trate de: 

(div-name) {
    position: absolute;
}

Tenga en cuenta que esto no se ve bien en absoluto cuando se utilizan dos divs flotantes colocadas una al lado. Sin embargo, funciona bien para cualquier otro tipo.

Uso: 

{
    position: absolute;
    top: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
}

De esta manera, se centra y se cubre la página si se trata de más de una vista del navegador de largo.

Esta es la solución más simple, que yo sepa. Desafortunadamente, sin embargo, esto no funciona en Internet Explorer 8 y mayores, ya que no son compatibles con la unidad vh (altura de la ventana gráfica). 

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

#full-height{
  min-height: 100vh;
}
</style>
</head>
<body>
<div id='full-height'>

</div>
</body>
</html>

Esto debería funcionar: 

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

Sin embargo, es posible que desee añadir un color de fondo o un borde para asegurarse de que funciona, de lo contrario no será capaz de ver correctamente.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top