Como criar div para preencher todo o espaço entre o cabeçalho e rodapé div

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

  •  03-07-2019
  •  | 
  •  

Pergunta

Eu estou trabalhando em mover-se de usar tabelas para fins de layout de usar divs (sim, sim, o grande debate). Eu tenho 3 divs, um cabeçalho, conteúdo e rodapé. O cabeçalho e rodapé são 50px cada. Como posso obter a div rodapé para permanecer na parte inferior da página, e a div de conteúdo para preencher o espaço entre os dois? Eu não quero codificar a altura divs conteúdo, porque a resolução da tela pode mudar.

Foi útil?

Solução

solução Flexbox

Usando o layout flexível que pode conseguir isso permitindo ao mesmo tempo cabeçalho altura natural e rodapé. Tanto o cabeçalho e rodapé vai ficar com a parte superior e inferior da janela, respectivamente (muito parecido com um aplicativo móvel nativo) ea área de conteúdo principal irá preencher o espaço restante, enquanto qualquer estouro verticais serão rolagem dentro dessa área.

Ver JS Fiddle

HTML 

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>

CSS 

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

body {
  display: flex;
  flex-direction: column;
}

header,
footer {
  flex: none;
}

main {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto;
}

Outras dicas

Para resumir (e este veio a CSS Fixo rodapé link fornecido pelo Traingamer), isto é o que eu usei: 

html, body 
{ 
    height: 100%; 
} 

#divHeader
{
    height: 100px;
}

#divContent
{
    min-height: 100%; 
    height: auto !important; /*Cause footer to stick to bottom in IE 6*/
    height: 100%; 
    margin: 0 auto -100px; /*Allow for footer height*/
    vertical-align:bottom;
}

#divFooter, #divPush
{
    height: 100px; /*Push must be same height as Footer */
}

<div id="divContent">
    <div id="divHeader">
        Header
    </div>

    Content Text

    <div id="divPush"></div>
</div>
<div id="divFooter">
    Footer
</div>

Para expandir a Mitchel Sellers resposta, dar o seu conteúdo altura div:. 100% e dar-lhe uma margem de auto

Para uma explicação completa e exemplo, ver Ryan Fait CSS Fixo Rodapé .

Uma vez que você sabe o tamanho (altura) de seu cabeçalho, colocá-lo dentro da div de conteúdo (ou margens de uso).

Posição absoluta vai lhe dar problemas se o seu conteúdo é maior (mais alto) do que a janela.

Uma maneira de fazer isso usando CSS Grid:

index.html 

<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="main.css" rel="stylesheet">
  </head>
  <body>
    <main>
      <header>Header</header>
      <section>Content</section>
      <footer>Footer</footer>
    </main>
  </body>
</html>

main.css 

body {
    margin: 0;
}
main {
    height: 100%;
    display: grid;
    grid-template-rows: 100px auto 100px;
}
section {
    height: 100%;
}

Se você está tentando maximizar a altura de sua div conteúdo, no add CSS

altura: 100%; 

#footer {
 clear: both;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top