Como posso esticar a div a 100% altura da página?

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

  •  11-09-2019
  •  | 
  •  

Pergunta 

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

        </style>

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

Como posso esticar div de altura de 100% da página?

Foi útil?

Solução

Tente (ele deve funcionar na maioria dos 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. */
}

Outras dicas

Aplicar 

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

deve produzir o efeito que você está procurando. Você precisa-lo em todos os três.

No entanto, muitas vezes não realmente fazer o que você acha que pode, e pode ser problemático. técnicas de faux-coluna ou "rodapés pegajosas" tendem a funcionar melhor. 

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

</style>

Isto irá funcionar, como um exemplo. 

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

Se você quiser fazê-lo via JavaScript este código deve funcionar para a maioria dos 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>

Você deve definir a altura de 100% para o corpo e ele deve fazer: 

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

html {
    height: 100%;
}

Isso não vai funcionar se você tem um DOCTYPE. Eu estou procurando uma resposta muito, mas eu tenho um DOCTYPE. No entanto, há uma maneira de fazê-lo com um DOCTYPE, mas ele não funciona com dois divs flutuante esquerda e direita lado uns dos outros, tente: 

(div-name) {
    position: absolute;
}

Esteja ciente de que este não parece bom em tudo quando se utiliza duas divs flutuantes lado uns dos outros. Mas, ele funciona bem para qualquer outro tipo.

Use: 

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

Desta forma, será centrado e cobrir a página se ela é mais do que uma visualização do browser longo.

Aqui está a solução mais simples que eu conheço. Infelizmente, no entanto, ele não funciona no Internet Explorer 8 e mais velhos, pois eles não suportam o vh (altura do visor) unidade. 

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

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

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

Isso deve funcionar: 

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

No entanto, você pode querer adicionar uma cor de fundo ou borda para se certificar de que funciona, então você não será capaz de vê-lo corretamente.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top