Altura da div 100% e expande para caber no conteúdo

Eu tenho um elemento div na minha página com sua altura definida como 100%. A altura do corpo também é definida como 100%. A div interna tem um fundo e tudo isso e é diferente do fundo do corpo. Isso funciona para tornar a altura da div 100% da altura da tela do navegador, mas o problema é que tenho conteúdo dentro dessa div que se estende verticalmente além da altura da tela do navegador. Quando rolar para baixo, a div termina no ponto em que você teve que começar a rolar a página, mas o conteúdo excede o limite. Como faço para que a div sempre vá até o fundo para se ajustar ao conteúdo interno?

Aqui está uma simplificação do meu CSS:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

Depois de rolar a página, a escuridão termina e o conteúdo flui para o fundo vermelho. Não parece importar se eu definir a posição como relativa ou absoluta no #some_div, o problema ocorre de qualquer maneira. O conteúdo dentro do #some_div é praticamente absolutamente posicionado e é gerado dinamicamente a partir de um banco de dados, portanto, sua altura não pode ser conhecida antecipadamente.

Edit: Aqui está uma captura de tela do problema:

Aqui está o que você deve fazer no estilo CSS, nos principais div

display: block;
overflow: auto;

E não toque height

Defina o heightpara autoe min-heightpara 100%. Isso deve resolver a maioria dos navegadores.

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

Normalmente, esse problema surge quando os elementos filho de uma div principal são flutuados. Aqui está a solução mais recente do problema:

No seu arquivo CSS, escreva a seguinte classe chamada .clearfix junto com o pseudo-seletor : after

.clearfix:after {
content: "";
display: table;
clear: both;
}

Em seguida, no seu HTML, adicione a classe .clearfix ao seu div. Por exemplo:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Deve funcionar sempre. Você pode chamar o nome da classe como .group vez de .clearfix , uma vez que irá tornar o código mais semântico. Observe que, não é necessário adicionar o ponto ou mesmo um espaço no valor do conteúdo entre aspas duplas "". Além disso, estouro: auto; pode resolver o problema, mas causa outros problemas, como mostrar a barra de rolagem, e não é recomendado.

Fonte: Blog de Lisa Catalano e Chris Coyier

Se você acabou de deixar o height: 100%e use display:block;o divterá tanto espaço quanto o conteúdo dentro do div. Dessa forma, todo o texto ficará no fundo preto.

Esta pergunta pode ser antiga, mas merece uma atualização. Aqui está outra maneira de fazer isso:

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

Tente o seguinte:

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
} 

O IE6 e versões anteriores não suportam a propriedade min-height.

Acho que o problema é que, quando você diz ao corpo para ter uma altura de 100%, o fundo só pode ser tão alto quanto a altura de uma "janela de visualização" de um navegador (a área de visualização que exclui as barras de ferramentas, barras de status e barras de menus, e as bordas da janela). Se o conteúdo for mais alto que uma viewport, ele excederá a altura dedicada ao plano de fundo.

Essa propriedade de altura mínima no corpo deve forçar o plano de fundo a ter pelo menos a altura de uma janela de visualização se o conteúdo não preencher uma página inteira até a parte inferior, mas também deve permitir que ele cresça para baixo para abranger mais conteúdo interno.

Pergunta antiga, mas no meu caso, achei que o uso position:fixedresolveu para mim. Minha situação pode ter sido um pouco diferente. Eu tinha uma sobreposição semi-transparente divcom uma animação de carregamento que precisava ser exibida enquanto a página estava carregando. Então, usando height:auto / 100%ou min-height: 100%ambos cheios da janela, mas não a área de off-screen. O uso position:fixeddesse rolo de sobreposição com o usuário sempre cobriu a área visível e manteve minha animação de pré-carregamento centralizada na tela.

Basta adicionar essas duas linhas no seu css id #some_div

display: block;
overflow: auto;

Depois disso, você receberá o que está procurando!

Não tenho muita certeza de ter entendido a pergunta, porque esta é uma resposta bastante direta, mas aqui vai ... :)

Você tentou definir a propriedade overflow do contêiner para visível ou automático?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

A adição disso deve empurrar o contêiner preto para o tamanho que seu contêiner dinâmico exigir. Prefiro visível ao automático porque o automático parece vir com barras de rolagem ...

Navegadores modernos suportam a unidade "altura da janela de exibição". Isso expandirá a div para a altura da viewport disponível. Acho mais confiável do que qualquer outra abordagem.

#some_div {
    height: 100vh;
    background: black;
}

Até você pode fazer assim

display:block;
overflow:auto;
height: 100%;

Isso incluirá cada div dinâmico de acordo com o conteúdo. Suponha que, se você tem uma div em comum com a classe, ela aumentará a altura de cada div dinâmica de acordo com o conteúdo

Você também pode usar

 display: inline-block;

o meu trabalhou com isso

OVERLAY SEM POSIÇÃO: FIXO

Uma maneira muito legal de descobrir isso em um menu recente foi definir o corpo para:

position: relative

e defina sua classe de wrapper assim:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

Isso significa que você não precisa definir a posição fixa e ainda pode permitir a rolagem. Eu usei isso para sobrepor menus realmente grandes.

use flex

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

Ok, eu tentei algo como isto:

corpo (normal)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

Não é a maneira exata de escrevê-lo, mas se você exibir a div principal como uma tabela, ela se expandirá e eu implementei barras de rolagem.