css html - Faça um div preencher a altura do espaço restante na tela




15 Answers

Atualização de 2015: a abordagem flexbox

Há duas outras respostas mencionando brevemente o flexbox ; no entanto, isso foi há mais de dois anos, e eles não fornecem nenhum exemplo. A especificação para flexbox definitivamente se estabeleceu agora.

Nota: Embora a especificação de Layout de Caixas Flexíveis de CSS esteja no estágio Recomendação de Candidato, nem todos os navegadores a implementaram. A implementação do WebKit deve ser prefixada com -webkit-; O Internet Explorer implementa uma versão antiga da especificação, prefixada com -ms-; O Opera 12.10 implementa a versão mais recente da especificação, não-redefinida. Consulte a tabela de compatibilidade em cada propriedade para obter um status de compatibilidade atualizado.

(retirado de flexbox )

Todos os principais navegadores e o IE11 + suportam o Flexbox. Para o IE 10 ou mais antigo, você pode usar o calço FlexieJS.

Para verificar o suporte atual, você também pode ver aqui: http://caniuse.com/#feat=flexbox

Exemplo de trabalho

Com o flexbox, você pode alternar facilmente entre qualquer uma das suas linhas ou colunas, tendo dimensões fixas, dimensões de tamanho de conteúdo ou dimensões do espaço restante. No meu exemplo, configurei o cabeçalho para ajustar seu conteúdo (conforme a pergunta de OPs), adicionei um rodapé para mostrar como adicionar uma região de altura fixa e, em seguida, definir a área de conteúdo para preencher o espaço restante.

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

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

No CSS acima, a propriedade flex-shrink as propriedades flex-grow , flex-shrink e flex-basis para estabelecer a flexibilidade dos itens flexíveis. O Mozilla tem uma flexbox .

tables align

No momento, estou trabalhando em um aplicativo da web, no qual quero que o conteúdo preencha a altura de toda a tela.

A página tem um cabeçalho, que contém um logotipo e informações da conta. Isso pode ser uma altura arbitrária. Eu quero que o conteúdo div atinja o restante da página até o final.

Eu tenho um div cabeçalho e um div conteúdo. No momento estou usando uma tabela para o layout da seguinte forma:

CSS e HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

A altura inteira da página é preenchida e não é necessária nenhuma rolagem.

Para qualquer coisa dentro do conteúdo div, configuração top: 0; vai colocá-lo logo abaixo do cabeçalho. Às vezes, o conteúdo será uma tabela real, com a altura definida como 100%. Colocar o header dentro do content não permitirá que isso funcione.

Existe uma maneira de obter o mesmo efeito sem usar a table ?

Atualizar:

Elementos dentro do conteúdo div também terão alturas configuradas para porcentagens. Então, algo em 100% dentro do div irá preenchê-lo para o fundo. Assim como dois elementos em 50%.

Atualização 2:

Por exemplo, se o cabeçalho ocupar 20% da altura da tela, uma tabela especificada em 50% dentro do #content ocuparia 40% do espaço da tela. Até agora, embrulhar a coisa toda em uma mesa é a única coisa que funciona.




O post original é mais de 3 anos atrás. Acho que muitas pessoas que chegam a este post como eu estão procurando por uma solução de layout semelhante a um aplicativo, digamos um conteúdo fixo de cabeçalho, rodapé e altura ocupando a tela restante. Se assim for, este post pode ajudar, funciona no IE7 +, etc.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

E aqui estão alguns trechos desse post:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}
<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>




Abordagem somente CSS (se a altura for conhecida / fixa)

Quando você quer que o elemento do meio se espalhe na página inteira verticalmente, você pode usar o calc() que é introduzido no CSS3.

Assumindo que temos elementos de header e footer altura fixa e queremos que a tag de section tenha toda a altura vertical disponível ...

Demo

Marcação assumida

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Então, o seu CSS deve ser

html, body {
    height: 100%;
}

header {
    height: 100px;
    background: grey;
}

section {
    height: calc(100% - (100px + 150px)); 
    /* Adding 100px of header and 150px of footer */

    background: tomato;
}

footer {
    height: 150px;
    background-color: blue;
}

Então, aqui está o que está fazendo, somando a altura dos elementos e deduzindo de 100% usando a função calc() .

Apenas certifique-se de usar height: 100%; para os elementos pai.




Isso pode ser feito puramente por CSS usando vh :

#page 
{
  display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent 
{
  float:left; width:100%; display:block;
}
#content 
{      
float:left; width:100%; height:100%; display:block; overflow:scroll;
}

e o HTML

<div id="page">
   <div id="tdcontent">
   </div>
   <div id="content">
   </div>
</div>

Eu verifiquei, ele funciona em todos os principais navegadores: Chrome , IE e FireFox




Nenhuma das soluções postadas funciona quando você precisa da div inferior para rolar quando o conteúdo é muito alto. Aqui está uma solução que funciona nesse caso:

HTML:

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.container {
  width: 400px;
  height: 300px;
}
.header {
  background: cyan;
}
.body {
  background: yellow;
  height: 100%;
}
.body-content-outer-wrapper {
  height: 100%;
}
.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}
.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Fonte original: preenchendo a altura restante de um contêiner durante o processamento de estouro no CSS

Visualização ao vivo do JSFiddle




Caminho Simples CSS3

height: calc(100% - 10px); // 10px is height of your first div...

Todos os principais navegadores nos dias de hoje suportam isso, então vá em frente se você não tiver necessidade de suporte a navegadores antigos.







Disclaimer: A resposta aceita dá a idéia da solução, mas eu estou achando um pouco inchado com um wrapper desnecessário e regras css. Abaixo está uma solução com muito poucas regras de CSS.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

A solução acima usa unidades de http://caniuse.com/#feat=flexbox visualização e http://caniuse.com/#feat=flexbox e, portanto, é IE10 +, desde que você use a sintaxe antiga do IE10.

Codepen para jogar: link para codepen

Ou este, para aqueles que precisam do container principal para ser rolável em caso de transbordamento de conteúdo: link para codepen




Eu lutei com isso por um tempo e terminei com o seguinte:

Como é fácil tornar o conteúdo DIV na mesma altura do pai, mas aparentemente é difícil torná-lo na altura dos pais menos a altura do cabeçalho, decidi fazer o conteúdo div com altura total, mas posicioná-lo no canto superior esquerdo e depois definir um preenchimento para o topo que tem a altura do cabeçalho. Desta forma, o conteúdo é exibido sob o cabeçalho e preenche todo o espaço restante:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}



Há uma tonelada de respostas agora, mas achei usando height: 100vh; para trabalhar no elemento div que precisa preencher todo o espaço vertical disponível.

Dessa forma, não preciso brincar com exibição ou posicionamento. Isso veio a calhar ao usar o Bootstrap para criar um painel onde eu tinha uma barra lateral e uma main. Eu queria que o cano principal se esticasse e preenchesse todo o espaço vertical para que eu pudesse aplicar uma cor de fundo.

div {
    height: 100vh;
}

Suporta o IE9 e acima: clique para ver o link




Vincent, eu responderei novamente usando seus novos requisitos. Já que você não se importa com o conteúdo que está sendo escondido se for muito longo, você não precisa flutuar o cabeçalho. Basta colocar o overflow oculto nas tags html e body e definir a #content height para 100%. O conteúdo será sempre maior que a janela de visualização pela altura do cabeçalho, mas ficará oculto e não causará barras de rolagem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>



 style="height:100vh"

resolvi o problema para mim. No meu caso eu apliquei isso ao div necessário




Eu encontrei uma solução bastante simples, porque para mim era apenas um problema de design. Eu queria que o resto da Página não fosse branco abaixo do rodapé vermelho. Então eu defino a cor de fundo das páginas para vermelho. E o conteúdo backgroundcolor para branco. Com a altura do conteúdo configurada para, por exemplo, 20 ou 50% uma página quase vazia não deixará toda a página vermelha.




Eu tive o mesmo problema mas não consegui fazer funcionar a solução com flexboxes acima. Então criei meu próprio template, que inclui:

  • um cabeçalho com um elemento de tamanho fixo
  • um rodapé
  • uma barra lateral com uma barra de rolagem que ocupa a altura restante
  • conteúdo

Eu usei flexboxes, mas de uma maneira mais simples, usando apenas propriedades display: flex e flex-direction: row | coluna :

Eu uso angular e quero que meus tamanhos de componentes sejam 100% de seu elemento pai.

A chave é definir o tamanho (em porcentagens) para todos os pais para limitar seu tamanho. No exemplo a seguir myapp height tem 100% da viewport.

O componente principal tem 90% da viewport, porque o cabeçalho e o rodapé têm 5%.

Eu postei meu modelo aqui: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>






Related

css html html-table