Tag HTML5 a Div dla automatycznej zmiany rozmiaru

Question

Mam nadzieję na rozwiązanie, ale najgorszy scenariusz, wyjaśnienie, dlaczego mój div nie zmienia rozmiaru i może to być spowodowane tym, że używam tagu nav.

Mam następujący html. Kiedy zawartość w moim tagu 'section' rośnie, tak samo robi div z klasą content-strony. Jednak gdy moje pozycje w menu nawigacji rosną, element div nie zmienia rozmiaru.

<div class="page-content"> 
    <nav> 
     <ul>{menu items here}</ul> 
    </nav> 
    <section id="main"> 
     {bunch of text here} 
    </section> 
</div> 

Oto moje css.

.page-content 
{ 
    display: block; 
    position:relative; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    background-image: url(images/bg-home-main.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 

} 

    nav { 
    display: block; 
    float: left; 
    padding: 15px; 
    position: relative; 
    margin: 0px 0px 0px -45px; 
} 

#main { 
    padding: 5px 25px 5px 25px; 
    margin-left: 175px; 
} 

Problem polega na tym, że element div ma obraz tła, który powinien obejmować tło obszaru nawigacyjnego i sekcji. Jednak dzieje się tak tylko wtedy, gdy mój obszar przekroju jest większy (od góry do dołu) niż moje nav, ponieważ div będzie rozciągał się, aby pomieścić rozmiar sekcji. Jednakże, jeśli mój obszar nawigacji jest większy, to faktycznie rozwija się poza div i tam dla obrazu.

Answer 1

Po wypłynięciu elementu wyjmuje się go z przepływu i nie będzie on rozszerzany o element. Jednym z obejść tego problemu jest dodanie przepełnienia: hidden; do elementu zawierającego.

Korzystanie z przelewu: ukryty; jest formą clearfix - poprawką powodującą rozszerzenie elementu zawierającego, aby pokazać wszystkie pływające, zawarte elementy. Właściwie każda wartość przepełnienia działa, ale przepełnienie: auto powoduje paski przewijania w Eksploratorze na Macu (nie jest pewne, czy ktokolwiek nadal używa tego) i przepełnienie: przewijanie powoduje, że paski przewijania są tym samym problemem. W przypadku niektórych wersji IE należy również podać wartość szerokości, aby to działało. Istnieją inne wyraźne poprawki, zwykle polegające na wstawianiu jakiegoś elementu po pływającym elemencie, który usuwa ten element pływający, powodując także rozszerzenie elementu zawierającego - div bez wysokości, ale bez wyraźnego nałożenia na niego, lub użycie: po pseudo element, ale zwykle używam przepełnienia, ponieważ nie dodaje on żadnych prezentacji.