Div osiąga 100% i rozszerza się, aby dopasować się do treści

Na mojej stronie mam element div z wysokością ustawioną na 100%. Wysokość ciała jest również ustawiona na 100%. Wewnętrzny div ma tło i to wszystko i różni się od tła ciała. Działa to w przypadku ustawiania wysokości div na 100% wysokości ekranu przeglądarki, ale problem polega na tym, że mam zawartość wewnątrz tego elementu div, który rozciąga się pionowo poza wysokość ekranu przeglądarki. Kiedy przewijam w dół, element div kończy się w miejscu, w którym trzeba było rozpocząć przewijanie strony, ale zawartość wykracza poza to. Jak sprawić, by element div zawsze sięgał do samego dołu, aby pasował do wewnętrznej zawartości?

Oto uproszczenie mojego CSS:

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

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

Kiedy przewijam stronę, czerń się kończy, a treść spływa na czerwone tło. Wydaje się, że nie ma znaczenia, czy ustawię pozycję na #some_div na względną czy bezwzględną, problem występuje w obu przypadkach. Treść wewnątrz #some_div jest w większości pozycjonowana absolutnie i jest dynamicznie generowana z bazy danych, więc jej wysokość nie może być z góry znana.

Edycja: Oto zrzut ekranu problemu:

Oto, co powinieneś zrobić w stylu CSS div

display: block;
overflow: auto;

I nie dotykaj height

Ustawić heightsię autoi min-heightdo 100%. To powinno rozwiązać problem w przypadku większości przeglądarek.

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

Zwykle ten problem pojawia się, gdy elementy potomne elementu nadrzędnego Div są unoszone. Oto najnowsze rozwiązanie problemu:

W swoim pliku CSS napisz następującą klasę o nazwie .clearfix wraz z pseudo selektorem : after

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

Następnie w kodzie HTML dodaj klasę .clearfix do nadrzędnego elementu Div. Na przykład:

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

Powinno działać zawsze. Możesz nazwać nazwę klasy jako .group zamiast .clearfix , ponieważ uczyni to kod bardziej semantycznym. Zwróć uwagę, że nie jest konieczne dodawanie kropki ani nawet spacji w wartości Treści między podwójnym cudzysłowem „”. Ponadto przepełnienie: auto; może rozwiązać problem, ale powoduje inne problemy, takie jak wyświetlanie paska przewijania, i nie jest zalecane.

Źródło: Blog Lisy Catalano i Chrisa Coyiera

Jeśli po prostu zostawić height: 100%i używać zajmie tyle miejsca co zawartość wewnątrz . W ten sposób cały tekst pozostanie na czarnym tle.display:block;divdiv

To pytanie może być stare, ale zasługuje na aktualizację. Oto inny sposób, aby to zrobić:

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

Spróbuj tego:

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

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

IE6 i wcześniejsze wersje nie obsługują właściwości min-height.

Myślę, że problem polega na tym, że kiedy powiesz korpusowi, że ma wysokość 100%, jego tło może być tak wysokie, jak wysokość jednego „okna roboczego” przeglądarki (obszar wyświetlania, który wyklucza paski narzędzi przeglądarki, paski stanu i paski menu oraz krawędzie okien). Jeśli zawartość jest wyższa niż jeden obszar roboczy, przekroczy wysokość przeznaczoną dla tła.

Ta właściwość minimalnej wysokości w treści powinna WYMUSZAĆ, aby tło było co najmniej tak wysokie jak jeden widoczny obszar, jeśli treść nie wypełnia całej strony w dół, ale powinna również pozwolić jej rosnąć w dół, aby objąć więcej treści wewnętrznych.

Stare pytanie, ale w moim przypadku znalazłem position:fixedrozwiązanie za pomocą rozwiązania. Moja sytuacja mogła być jednak trochę inna. Miałem nakładkę półprzezroczystą divz animacją ładowania, której potrzebowałem, aby była wyświetlana podczas ładowania strony. Tak więc użycie height:auto / 100%lub min-height: 100%obu wypełniło okno, ale nie obszar poza ekranem. Użycie position:fixedspowodowało, że nakładka przewijała się wraz z użytkownikiem, więc zawsze obejmowała widoczny obszar i utrzymywała moją animację wstępnego ładowania na środku ekranu.

Po prostu dodaj te dwie linie do swojego identyfikatora css #some_div

display: block;
overflow: auto;

Po tym otrzymasz to, czego szukasz!

Nie jestem do końca pewien, czy zrozumiałem pytanie, ponieważ jest to dość prosta odpowiedź, ale proszę bardzo ... :)

Czy próbowałeś ustawić właściwość przepełnienia kontenera na visible lub auto?

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

Dodanie tego powinno wypchnąć czarny kontener do dowolnego rozmiaru wymaganego przez kontener dynamiczny. Wolę widoczne niż automatyczne, ponieważ wydaje się, że auto ma paski przewijania ...

Nowoczesne przeglądarki obsługują jednostkę „wysokość okienka ekranu”. Spowoduje to rozszerzenie elementu div do dostępnej wysokości rzutni. Uważam, że jest to bardziej niezawodne niż jakiekolwiek inne podejście.

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

Nawet ty możesz to zrobić

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

Obejmuje to każdy dynamiczny element div zgodnie z zawartością. Załóżmy, że jeśli masz wspólny element div z klasą, zwiększy on wysokość każdego dynamicznego elementu div zgodnie z zawartością

Możesz także użyć

 display: inline-block;

mój pracował z tym

NAKŁADKA BEZ POZYCJI: NAPRAWIONA

Naprawdę fajnym sposobem, w jaki to wymyśliłem dla ostatniego menu, było ustawienie ciała na:

position: relative

i ustaw klasę opakowania w ten sposób:

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

Oznacza to, że nie musisz ustawiać stałej pozycji i nadal możesz pozwolić na przewijanie. Użyłem tego do nakładania menu, które są NAPRAWDĘ duże.

użyj flex

.parent{
    display: flex
}

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

Ok, próbowałem czegoś takiego:

ciało (normalne)

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

To nie jest dokładny sposób, aby to zapisać, ale jeśli wyświetlisz główny div jako tabelę, rozszerza się, a następnie zaimplementowałem paski przewijania.