Como forçar um bloco DIV a se estender até a parte inferior de uma página, mesmo que não tenha conteúdo?

190

Na marcação mostrada abaixo, estou tentando fazer com que a div de conteúdo seja estendida até a parte inferior da página, mas só será esticada se houver conteúdo a ser exibido. O motivo pelo qual desejo fazer isso é que a borda vertical ainda apareça na página, mesmo que não exista nenhum conteúdo para exibição.

Aqui está o meu HTML :

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

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

E meu CSS :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
css html border Vince Panuccio
fonte
O que você deseja fazer se houver mais conteúdo que possa caber na página? Com quais navegadores você se importa?
Drs9222

Respostas:

117

Seu problema não é que a div não esteja a 100% de altura, mas que o contêiner ao seu redor não esteja. Isso ajudará no navegador que eu suspeito que você esteja usando:

html,body { height:100%; }

Talvez você precise ajustar o preenchimento e as margens também, mas isso o levará a 90% do caminho. Se você precisar fazê-lo funcionar com todos os navegadores, precisará mexer um pouco nele.

Este site tem alguns excelentes exemplos:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

Eu também recomendo ir para http://quirksmode.org/

Jason Hernandez
fonte
46
Esta solução não é amigável para as páginas que rolam.
Jbranchaud
3
propriedade min-height no CSS deve ajudá-lo ... Eu acho
Alfabravo
1
Curiosamente este classificadas meus problemas de rolagem ao invés de causar-lhes
Alan Macdonald
Ele não funciona para mim na versão mais recente do chrome.
precisa
48

Tentarei responder à pergunta diretamente no título, em vez de me empenhar em colocar um rodapé na parte inferior da página.

Faça div estender até a parte inferior da página se não houver conteúdo suficiente para preencher a janela de exibição do navegador vertical disponível:

Demonstração em (arraste a alça do quadro para ver o efeito): http://jsfiddle.net/NN7ky
(parte superior: limpa, simples. Parte inferior: requer flexbox - http://caniuse.com/flexbox )

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - ou estou com muito sono

Gima
fonte
14
Alguns de nós têm a sorte de suportar apenas navegadores "modernos", então isso foi incrivelmente útil para mim. Obrigado Gima. Eu tentei várias maneiras de fazer algo assim, mas sempre foi quebrado de várias maneiras sutis. Isto é muito melhor. Ainda não entendi exatamente por que funciona dessa maneira.
Chris Nicola
1
O elemento Flexbox tenta dividir sua área de conteúdo entre os elementos nele. A solução que ofereci funciona por 1) negar redução de divs e 2) permitir o crescimento de .div2. Portanto, os divs não encolhem para ocultar o conteúdo e apenas o .div2 pode expandir.
Gima
Portanto, isso corrige o problema que eu estava tendo no Firefox, onde o conteúdo ainda era um pouco grande demais para o navegador. Infelizmente, no Chrome, isso por si só não resolve esse problema. No entanto, também definir a margem e o preenchimento como 0.
22315 Michael Scheper
esta é a resposta, min-height correto: 100% só funciona se não há nada mais no recipiente pai, e calc não é realmente helpng se o irmão acima elemento de expansão tem altura desconhecida
zakius
Depois de horas lutando com esse problema, esta é a única solução que realmente o corrigiu para mim. Faltando apenas uma pequena explicação do que cada parte faz. Mas de qualquer forma, muito obrigado @Gima.
Pylund # 14/17
18

Tente brincar com a seguinte regra css:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Mude a altura para se adequar à sua página. a altura é mencionada duas vezes para compatibilidade entre navegadores.

Kevin Read
fonte
isso funciona, mas descobri que se eu aumentar a altura mínima para mais de 600px, ele criará um pergaminho. Você tem alguma idéia de por que isso está acontecendo?
Siddharth Patel
1
@SiddharthPatel Como a divisão #content está excedendo o pai. Portanto, defina o pai da div #content para ter um valor de css overflow: auto ou overflow: hidden e ele deve expandir / estourar para caber, em vez de rolar. Provavelmente seria melhor para colocar questões como novas perguntas próxima vez, em vez de comentários :)
Colt McCormack
Depois de tentar o método de cada resposta, este é o único que funciona. Mesmo isso funciona perfeitamente, porque eu tenho que ajustar o valor da altura para coincidir com a altura da página, então é preciso fazer ajustes. No entanto, ele funciona igualmente para todos os navegadores.
TARKUS
Muito obrigado por esta resposta. É simples e funciona bem em várias plataformas. Na verdade, eu já havia usado isso sem perceber há cerca de um ano, gostaria de poder votar duas vezes.
vedi0boy
6

você pode cortá-lo com a declaração min-height

<div style="min-height: 100%">stuff</div>
Owen
fonte
3

A propriedade min-height não é suportada por todos os navegadores. Se você precisar que seu #content aumente sua altura em páginas mais longas, a propriedade height será reduzida.

É um pouco complicado, mas você pode adicionar uma div vazia com uma largura de 1 px e uma altura de, por exemplo, 1000 px dentro da div #content. Isso forçará o conteúdo a ter pelo menos 1000 px de altura e ainda permitirá que o conteúdo mais longo estenda a altura quando necessário

Gene
fonte
3

Embora não seja tão elegante quanto o CSS puro, um pequeno javascript pode ajudar a conseguir isso:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>
Adam Franco
fonte
3

Experimentar:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Ainda não testei ...

Steph
fonte
3

Rodapé pegajoso com altura fixa:

Esquema HTML:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}
David Horák
fonte
2

Tente http://mystrd.at/modern-clean-css-sticky-footer/

O link acima está inativo, mas este link https://stackoverflow.com/a/18066619/1944643 está ok. : D

Demo:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>
Vinicius José Latorre
fonte
1
@ codemirror obrigado, eu acabei de editar o comentário com outro link que está funcionando.
Vinicius José Latorre
1

Você pode usar a unidade de comprimento "vh" para a propriedade min-height do próprio elemento e de seus pais. É suportado desde o IE9:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}
Nico
fonte
Isso apenas estende a div à altura da janela de visualização, não à página em si.
jansmolders86
1

Eu acho que o problema seria resolvido apenas fazendo o html preencher 100% também, pode ser que o corpo preencha 100% do html, mas o html não preenche 100% da tela.

Tente com: 

html, body {
      height: 100%;
}
David Marciel
fonte
0

Não tenho o código, mas sei que fiz isso uma vez usando uma combinação de height: 1000px e margin-bottom: -1000px; Tente isso.

Alexander Morland
fonte
Uau, isso realmente funciona! Mas se o conteúdo transborda do recipiente, não é possível ver a parte transbordada ...
adripanico
0

Dependendo de como o layout funciona, você pode definir o plano de fundo do <html>elemento, que é sempre pelo menos a altura da janela de exibição.


fonte
0

Não é possível fazer isso usando apenas folhas de estilo (CSS). Alguns navegadores não aceitam

height: 100%;

como um valor mais alto que o ponto de vista da janela do navegador.

Javascript é a solução mais fácil entre navegadores, embora, como mencionado, não seja limpa ou bonita.

Martin
fonte
-2

Sei que esse não é o melhor método, mas não consegui descobrir isso sem mexer no meu cabeçalho, menu, etc. Então .... eu usei uma mesa para essas duas colunas. Foi uma correção rápida. Não é necessário JS;)

Wen-D
fonte
-2

Não é a melhor nem a melhor implementação dos melhores padrões, mas você pode alterar o DIV para um SPAN ... É uma solução não tão recomendável, mas rápida = P =)

Metafaniel
fonte