CSS DIV không mở rộng khi có thêm văn bản

Question

Tôi có câu hỏi CSS nhanh, tôi hy vọng rằng ai đó có thể giúp tôi!

Tôi có DIV được gọi là #ContentPanel và tôi muốn nó có thể mở rộng để có thể cung cấp thêm văn bản nếu cần. Tại thời điểm này nếu văn bản dài hơn 500px (như được chỉ định trong CSS), nó sẽ xuất hiện ở phía dưới và trên nội dung trong div bên dưới. Làm thế nào tôi có thể thiết lập nó để tự động mở rộng và đẩy tất cả các div sau khi xuống dưới.

Nếu ai có bất kỳ ý tưởng, xin vui lòng cho tôi biết

Đây là HTML

<div id="MainContent"> 
    <div id="MainImage"></div> 
    <div id="ContentPanel">Text content goes here.</div> 
</div> 

... và đây là CSS

#MainContent { 
    position:relative; 
    height:500px; 
    width:800px; 
    margin:0 auto; 
    background-color: #000; 
} 

#MainImage { 
    position:absolute; 
    top:0; 
    left:0; 
    width:350px; 
    height:500px; 
    background-color:#000; 
} 

#ContentPanel { 
    position:absolute; 
    height:500px; 
    top:0; 
    left:350px; 
    width:450px; 
    background-color:#000; 
} 

Cảm ơn trước!

Trân trọng!

Decbrad

Answer 1

bạn cần phải sử dụng min-height css thuộc tính

Answer 2

Sử dụng min-height thay vì height.

Ngoại trừ IE 6: Có lỗi, sao cho nó diễn giải height như min-height.

Answer 3

Thử đặt chiều cao tối thiểu (chiều cao tối thiểu) thay vì chiều cao cố định, cụ thể.

Answer 4

Thuộc tính bạn đang theo dõi là chiều cao tối thiểu, thay vì chiều cao.

http://www.w3schools.com/CSS/pr_dim_min-height.asp

Điều này có nghĩa là yếu tố của bạn sẽ có ít nhất là cao. Nếu nội dung đảm bảo, chiều cao sẽ tăng lên vượt quá giá trị được chỉ định.

Answer 5

Tùy chọn thứ hai, bạn có thể muốn thử overflow: scroll; hoặc overflow-x và overflow-y để có thanh cuộn xuất hiện trên div trong trường hợp nội dung không vừa.

Answer 6

Như đã đề cập vấn đề là bạn xác định chiều cao cố định .. và do đó trình duyệt tuân thủ nó ..

Bạn cần phải làm cho nó linh hoạt hơn bằng cách sử dụng các min-height tài sản. Tuy nhiên IE không hỗ trợ nó, nhưng do lỗi khác về cách nó xử lý chiều cao (mà nó mở rộng để phục vụ cho nội dung nếu nhiều hơn chiều cao được xác định) nó có thể được làm việc xung quanh ..

Giải pháp hoàn chỉnh là

height:auto!important; /*this set the height to auto for those supporting it (not IE)*/ 
height:500px; /*for IE, all others override it by the previous rule*/ 
min-height:500px; /*for the ones that support it (all but IE)*/ 

Điều này, nói chung, là giải pháp cho các vấn đề như vậy .. trong trường hợp của bạn tôi thấy rằng bạn sử dụng định vị tuyệt đối .. nếu bạn thực sự cần điều này, và nó không chỉ là một nỗ lực để giải quyết vấn đề của bạn, sau đó tiếc là không có cách nào để một yếu tố điều chỉnh kích thước của nó để phục vụ cho các yếu tố vị trí tuyệt đối ..

Answer 7

Ý kiến ​​cá nhân: để giải quyết các vấn đề của IE6 với chiều cao tối thiểu, tốt hơn bạn nên sử dụng chú thích có điều kiện cụ thể của IE6 trong nhắm mục tiêu của bạn thay vì thêm hacks vào CSS của bạn.

Điều này là nếu có CSS ​​tuân thủ tiêu chuẩn quan trọng đối với bạn, mặc dù tbh ngày càng khó khăn hơn nhờ hỗ trợ trình duyệt tuyệt vời.

<!--[if IE 6]> 
#MainContent, #MainImage, #ContentPanel { height:500px; } 
<![endif]-->