Layout CSS de altura mínima de 100%

Qual é a melhor maneira de criar um elemento com 100% de altura mínima em uma ampla variedade de navegadores?

Em particular, se você tiver um layout com headere footerfixo height,

como você faz com que a parte do conteúdo intermediária preencha 100%o espaço intermediário com o footerfixo na parte inferior?

Estou usando o seguinte: Layout CSS - 100% de altura

Altura mínima

O elemento #container desta página tem uma altura mínima de 100%. Dessa forma, se o conteúdo exigir mais altura do que a viewport fornece, a altura de #content força o #container a ficar mais longo também. As colunas possíveis em #content podem ser visualizadas com uma imagem de plano de fundo em #container; divs não são células da tabela e você não precisa (ou deseja) dos elementos físicos para criar um efeito visual. Se você ainda não está convencido; pense linhas bambas e gradientes em vez de linhas retas e esquemas de cores simples.

Posicionamento relativo

Como o #container tem uma posição relativa, o #footer sempre permanecerá na parte inferior; como a altura mínima mencionada acima não impede que o #container seja redimensionado, isso funcionará mesmo se (ou melhor, quando) o #content forçar o #container a ficar mais longo.

Padding-bottom

Como ele não está mais no fluxo normal, o preenchimento de #content agora fornece espaço para o #footer absoluto. Esse preenchimento está incluído na altura rolada por padrão, para que o rodapé nunca se sobreponha ao conteúdo acima.

Escale um pouco o tamanho do texto ou redimensione a janela do navegador para testar esse layout.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

Funciona bem para mim.

Para definir uma altura personalizada bloqueada para algum lugar:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

Aqui está outra solução baseada em vh, ou viewpoint height, para detalhes, visite unidades CSS . É baseado nesta solução , que usa o flex.

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

As unidades são vw, vh, vmax, vmin. Basicamente, cada unidade é igual a 1% do tamanho da janela de exibição. Portanto, conforme a janela de visualização muda, o navegador calcula esse valor e ajusta-se de acordo.

Você pode encontrar mais informações aqui:

Especificamente:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

A resposta de kleolb02 parece muito boa. outra maneira seria uma combinação do rodapé pegajoso e do corte de altura mínima

Para min-heightfuncionar corretamente com porcentagens, ao herdar o nó pai min-height, o truque seria definir a altura do nó pai para que 1pxa criança min-heightfuncione corretamente.

Página de demonstração

Uma CSSsolução pura ( #content { min-height: 100%; }) funcionará em muitos casos, mas não em todos eles - especialmente no IE6 e IE7.

Infelizmente, você precisará recorrer a uma solução JavaScript para obter o comportamento desejado. Isso pode ser feito calculando a altura desejada para o seu conteúdo <div>e configurando-a como uma propriedade CSS em uma função:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

Você pode definir esta função como manipulador para onLoade onResizeeventos:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

Concordo com a Levik, pois o contêiner pai é definido como 100% se você tiver barras laterais e desejar que eles preencham o espaço para se encontrar com o rodapé. Você não pode defini-los como 100%, pois eles também serão 100% da altura dos pais. significa que o rodapé acaba sendo pressionado ao usar a função clear.

Pense dessa maneira, se o cabeçalho tiver 50px de altura e o rodapé tiver 50px de altura e o conteúdo for ajustado automaticamente ao espaço restante, por exemplo, 100px, por exemplo, e o contêiner de página for 100% desse valor, sua altura será de 200px. Então, quando você define a altura da barra lateral como 100%, são 200 pixels, mesmo que deva caber confortavelmente entre o cabeçalho e o rodapé. Em vez disso, acaba sendo 50px + 200px + 50px, portanto a página agora tem 300px porque as barras laterais estão definidas na mesma altura que o contêiner da página. Haverá um grande espaço em branco no conteúdo da página.

Estou usando o Internet Explorer 9 e é isso que estou obtendo como efeito ao usar esse método 100%. Não tentei em outros navegadores e presumo que ele possa funcionar em algumas das outras opções. mas não será universal.

Primeiro você deve criar um divcom id='footer'depois de sua contentdiv e, em seguida, basta fazer isso.

Seu HTML deve ficar assim:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

E o CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

Tente o seguinte:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

O divelemento abaixo da div de conteúdo deve ter clear:both.

Provavelmente a solução mais curta (funciona apenas em navegadores modernos)

Este pequeno pedaço de CSS faz "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

o único requisito é que você precisa ter um rodapé de altura fixa.

Por exemplo para este layout:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

você precisa deste CSS:

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }

Você pode tentar isso: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ Isso é 100% de altura e centro horizontal.

apenas compartilhe o que eu tenho usado e funciona muito bem

#content{
        height: auto;
        min-height:350px;
}

Como mencionado na resposta de Afshin Mehrabani, você deve definir a altura do corpo e do html para 100%, mas para chegar ao rodapé, calcule a altura do invólucro:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}