Como fazer uma <div> sempre em tela cheia?

170

Não importa como é o seu conteúdo.

É possível fazer isso?

html css responsive

— mascarar
fonte

2

Há muitas ótimas respostas aqui, mas não vejo menção ao flexbox, então pensei em compartilhar esses 2 centavos: ter uma div principal de 100% é uma coisa, mas se for a hora de colocar, organize , e centralize algum conteúdo nessa div, convém consultar o flexbox. css-tricks.com/snippets/css/a-guide-to-flexbox

— ArleyM

146

Isso sempre funciona para mim:

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

Esta é provavelmente a solução mais simples para esse problema. Só é necessário definir quatro atributos CSS (embora um deles seja apenas para fazer o IE feliz).

— Adam Harte
fonte

1

@AdamHarte Por que não funciona se você remover o seletor 'html' do CSS? → corpo {altura: 100%; margem: 0; }

— Alex Prut 12/04

2

@ P.Alex Math! Se a altura das tags HTML se estender para se ajustar ao conteúdo, a altura do corpo é 100% do pai, e você não o forçará a 100% do espaço disponível.

— Adam Harte

1

Eu apenas tentei no wpf usando cefsharp chromium e funciona :)

— adminSoftDK

106

Esta é a minha solução para criar uma div em tela cheia, usando css puro. Ele exibe uma div em tela cheia que é persistente na rolagem. E se o conteúdo da página couber na tela, a página não exibirá uma barra de rolagem.

Testado no IE9 +, Firefox 13+, Chrome 21+

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>

Expandir snippet

— Mihai Cicu
fonte

58

Essa é a maneira mais estável (e fácil) de fazer isso e funciona em todos os navegadores modernos:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: lime; /* Just to visualize the extent */
  
}

<div class="fullscreen">
  Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>

Expandir snippet

_{Testado para funcionar no Firefox, Chrome, Opera, Vivaldi, IE7 + (baseado na emulação no IE11).}

— temor
fonte

1

Ele funciona melhor se você usar o seguinte: position: fixed; top: 0; left: 0;e agora a parte que é diferente: width: 100%; height: 100%;. Na verdade, isso funciona perfeitamente em navegadores antigos.

— Aart den Braber

1

Por que é melhor usar largura e altura do que usar inferior e direita? Se você usa largura e altura e também deseja algum preenchimento e / ou borda, também precisa ter certeza de que possui box-sizing: border-box;, caso contrário, obterá uma caixa maior que causará a rolagem. Veja isso .

— temor

31

A melhor maneira de fazer isso com os navegadores modernos seria usar os comprimentos percentuais da viewport , voltando aos comprimentos percentuais regulares para navegadores que não suportam essas unidades .

Os comprimentos de porcentagem da viewport baseiam-se no comprimento da própria viewport. As duas unidades que usaremos aqui são vh(altura da viewport) e vw(largura da viewport). 100vhé igual a 100% da altura da viewport e 100vwé igual a 100% da largura da viewport.

Supondo o seguinte HTML:

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

Você pode usar o seguinte:

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

Aqui está uma demonstração do JSFiddle que mostra o divelemento preenchendo a altura e a largura do quadro de resultados. Se você redimensionar o quadro de resultados, o divelemento será redimensionado de acordo.

— James Donnelly
fonte

18

Eu não tenho o IE Josh, você poderia testar isso para mim. Obrigado.

<html>
<head>
    <title>Hellomoto</title>
    <style text="text/javascript">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>

— Tubbe
fonte

você não precisa definir as larguras de 100%

— Adam Harte

Eu não entendo; você está codificando uma altura de 800px no DIV. O OP quer que isso seja dinâmico.

— 21139 Josh Stodola

Ah, desculpe, não vi aquele sneaking absoluto lá (ou no canto superior esquerdo). Bem, é bom, então :)

— Adam Harte

Como uma nota lateral, você pode querer usar position: fixedem vez se a página pode rolar, mas lembre-se que ele não funciona em alguns navegadores móveis caniuse.com/#feat=css-fixed

— luiges90

1

Ouvi dizer que existem maneiras mais modernas de resolver isso. @Tubbe você sabe se isso é verdade?

— bzlm

8

O que eu achei da melhor maneira elegante é como a seguir, o mais truque aqui é fazer o div's position: fixed.

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

<html>
  <head>
  <title>Test</title>
  </head>
  <body>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <div class="mask"></div>
    </body>
  </html>

Expandir snippet

— Jeff Tian
fonte

8

Mudar o bodyelemento em um flex containere divem um flex item:

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}

<div></div>

Expandir snippet

— Mori
fonte

8

Aqui está a solução mais curta, com base em vh. Observe que isso vhnão é suportado em alguns navegadores mais antigos .

CSS:

div {
    width: 100%;
    height: 100vh;
}

HTML:

<div>This div is fullscreen :)</div>

— olieidel
fonte

1

É conveniente, mas tem problemas em navegadores móveis: css-tricks.com/the-trick-to-viewport-units-on-mobile

— Alexander Kim

Por que complicar as coisas? Isso funciona nos navegadores móveis DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 e Chrome 81.0.4044.138, assim como no Desktop; Brave 1.10.97, Chrome 83.0.4103.116 e Safari 12.1.2.

— Jakob

1

Esse é o truque que eu uso. Bom para projetos responsivos. Funciona perfeitamente quando o usuário tenta mexer no redimensionamento do navegador.

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>

— Shardul
fonte

-8

Infelizmente, a heightpropriedade em CSS não é tão confiável quanto deveria. Portanto, o Javascript precisará ser usado para definir o estilo de altura do elemento em questão para a altura da janela de exibição dos usuários. E sim, isso pode ser feito sem posicionamento absoluto ...

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>

— Josh Stodola
fonte

1

Se você estiver usando uma biblioteca como o jQuery (recomendado), obter a altura via $(window).height();seria a melhor idéia.

— 21139 Josh Stodola

Existe uma solução css pura?

— Máscara

@ Máscara Não, não há. Ainda não.

— 21139 Josh Stodola

@ Jed Que tal você tentar aplicar uma altura mínima: 100% e experimentá-la no Mac-Safari e talvez possamos encontrar uma solução aqui. Eu acho que seria melhor do que discutir sobre plataformas.

— 21139 Josh Stodola

3

Isso funciona no IE7, Chrome3 e Safari4 e Opera10. Tudo testado no Windows. A desvantagem é que ele usa javascript, que era algo que Mask queria evitar (veja seu comentário sobre esta resposta). A resposta do TandemAdam é CSS puro e funciona em todos os navegadores que testei, exceto o Opera.

— temor