Thẻ HTML5 so với Div để tự động thay đổi kích thước

Question

Tôi hy vọng một giải pháp, nhưng kịch bản trường hợp xấu nhất, giải thích tại sao div của tôi không thay đổi kích thước và có thể là do tôi đang sử dụng thẻ nav.

Tôi có html sau. Khi nội dung trong thẻ 'section' của tôi phát triển, thì div cũng có lớp nội dung trang. Tuy nhiên, khi các mục menu nav của tôi tăng lên, div không thay đổi kích thước.

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

Đây là css của tôi.

.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; 
} 

Vấn đề ở đây là div có hình nền phải bao gồm nền của cả khu vực điều hướng và phần. Tuy nhiên, điều này chỉ xảy ra nếu khu vực phần của tôi lớn hơn (từ trên xuống dưới) so với nav của tôi, vì div sẽ kéo dài để phù hợp với kích thước phần. Tuy nhiên, nếu khu vực nav của tôi lớn hơn, nó thực sự mở rộng ra ngoài div và ở đó cho hình ảnh.

Answer 1

Khi bạn thả nổi một phần tử, bạn lấy nó ra khỏi luồng và sẽ không mở rộng phần tử chứa phần tử đó. Một giải pháp cho việc này là thêm tràn: bị ẩn; cho phần tử chứa.

Sử dụng tràn: ẩn; là một hình thức của clearfix - một sửa chữa để gây ra các phần tử có chứa để mở rộng để hiển thị bất kỳ phần tử được lưu trữ. Trên thực tế bất kỳ giá trị của các công việc tràn, nhưng tràn: tự động gây ra thanh cuộn trong Explorer trên Mac (không chắc chắn nếu bất cứ ai vẫn thực sự sử dụng đó) và tràn: di chuyển nguyên nhân thanh cuộn đó là cùng một vấn đề. Đối với một số phiên bản của IE, bạn cũng cần phải bao gồm một giá trị chiều rộng để làm việc này. Có các bản sửa lỗi rõ ràng khác, thường liên quan đến việc chèn một loại phần tử nào đó sau phần tử nổi mà xóa phần tử nổi, cũng làm cho phần tử chứa mở rộng để chứa nó - một div không có chiều cao nhưng được áp dụng rõ ràng, hoặc sử dụng: sau phần tử giả, nhưng tôi thường sử dụng tràn vì nó không thêm bất kỳ đánh dấu hiện tại nào.