Div 100% chiều cao hoạt động trên Firefox nhưng không phải trong IE

Question

Tôi có div vùng chứa chứa hai div nội bộ; cả hai phải có chiều rộng 100% và chiều cao 100% trong vùng chứa.

Tôi đặt cả hai div nội bộ xuống 100% chiều cao. Điều đó hoạt động tốt trong Firefox, tuy nhiên trong IE, các div không kéo dài đến 100% chiều cao nhưng chỉ có chiều cao của văn bản bên trong chúng.

Sau đây là phiên bản đơn giản của biểu định kiểu của tôi.

#container 
{ 
    height: auto; 
    width: 100%; 
} 

#container #mainContentsWrapper 
{ 
    float: left; 

    height: 100%; 
    width: 70%; 
    margin: 0; 
    padding: 0; 
} 


#container #sidebarWrapper 
{  
    float: right; 

    height: 100%; 
    width: 29.7%; 
    margin: 0; 
    padding: 0; 
} 

Có điều gì tôi đang làm sai? Hoặc bất kỳ quirks Firefox/IE tôi đang bỏ lỡ?

Answer 1

Tôi nghĩ rằng "hoạt động tốt trong Firefox "chỉ ở chế độ hiển thị Quirks. Trong chế độ hiển thị Chế độ chuẩn hiển thị, điều đó cũng có thể không hoạt động tốt trong Firefox.

phần trăm phụ thuộc vào "chứa khối" thay vì chế độ xem.

CSS Specification says

Tỷ lệ được tính với đối với chiều cao của khối chứa các tạo hộp của. Nếu chiều cao của khối chứa không phải là được chỉ định rõ ràng (nghĩa là phụ thuộc về chiều cao nội dung) và phần tử này không được định vị hoàn toàn, giá trị tính thành 'tự động'.

nên

#container { height: auto; } 
#container #mainContentsWrapper { height: n%; } 
#container #sidebarWrapper { height: n%; } 

nghĩa

#container { height: auto; } 
#container #mainContentsWrapper { height: auto; } 
#container #sidebarWrapper { height: auto; } 

Để kéo dài đến 100% chiều cao của khung nhìn, bạn cần phải xác định chiều cao của khối chứa (trong trường hợp này, đó là #container) . Hơn nữa, bạn cũng cần phải xác định chiều cao cho nội dung và html, vì khối chứa ban đầu là "phụ thuộc vào UA".

Tất cả bạn cần là ...

html, body { height:100%; } 
#container { height:100%; } 

Answer 2

Bạn có thể phải đặt một hoặc cả hai:

html { height:100%; } 

hoặc

body { height:100%; } 

EDIT: Rất tiếc, không để ý họ đang lưu hành. Bạn chỉ cần nổi container.

Answer 3

Khó để cung cấp cho bạn câu trả lời hay, mà không thấy html mà bạn đang thực sự sử dụng.

Bạn có xuất ra một loại tài liệu/sử dụng hiển thị chế độ tiêu chuẩn không? Nếu không thực sự có thể nhìn vào một repro html, đó sẽ là đoán đầu tiên của tôi cho một sự khác biệt giải thích html giữa firefox và internet explorer.

Answer 4

Tôi không chắc bạn đang giải quyết vấn đề gì, nhưng khi tôi có hai thùng chứa cạnh nhau cần cùng chiều cao, tôi chạy một chút javascript trên tải trang để tìm chiều cao tối đa của cả hai và rõ ràng đặt người khác ở cùng độ cao. Dường như với tôi chiều cao đó: 100% có thể chỉ có nghĩa là "làm cho nó có kích thước cần thiết để chứa đầy đủ nội dung" khi những gì bạn thực sự muốn là "làm cho cả kích thước của nội dung lớn nhất."

Lưu ý: bạn sẽ cần phải định lại kích thước lại nếu có bất kỳ điều gì xảy ra trên trang để thay đổi chiều cao của chúng - như tóm tắt xác thực được hiển thị hoặc mở menu mở được.

Answer 5

Tôi không nghĩ rằng IE hỗ trợ việc sử dụng tự động để thiết lập chiều cao/chiều rộng, vì vậy bạn có thể thử đưa ra một giá trị số (như Jarett gợi ý).

Ngoài ra, có vẻ như bạn đang xóa các phao của bạn đúng cách. Thử thêm này để CSS của bạn cho #container:

#container { 
    height:100%; 
    width:100%; 
    overflow:hidden; 
    /* for IE */ 
    zoom:1; 
} 

Answer 6

tôi đã thực hiện một cái gì đó rất giống với những gì 'tvanfosson' cho biết, đó là, trên thực tế sử dụng JavaScript để liên tục theo dõi chiều cao có sẵn trong cửa sổ thông qua các sự kiện như onresize và sử dụng thông tin đó để thay đổi kích thước vùng chứa tương ứng (dưới dạng pixel thay vì phần trăm).

Hãy nhớ rằng, hiện có nghĩa là phụ thuộc JavaScript và không mượt mà như giải pháp CSS. Bạn cũng cần phải đảm bảo rằng hàm JavaScript có khả năng chính xác trả về kích thước cửa sổ trên tất cả các trình duyệt chính.

Hãy cho chúng tôi biết nếu một trong các giải pháp CSS được đề cập trước đây hoạt động, vì nó có vẻ như là cách tốt hơn để khắc phục sự cố.

Answer 7

Tôi đã thành công trong việc này để làm việc khi tôi đặt bên lề của các container để 0:

#container 
{ 
    margin: 0 px; 
} 

ngoài tất cả các phong cách khác của bạn

Answer 8

Hãy thử điều này ..

#container 
{ 
    height: auto; 
    min-height:100%; 
    width: 100%; 
} 

#container #mainContentsWrapper 
{ 
    float: left; 

    height: auto; 
    min-height:100% 
    width: 70%; 
    margin: 0; 
    padding: 0; 
} 


#container #sidebarWrapper 
{  
    float: right; 

    height: auto; 
    min-height:100% 
    width: 29.7%; 
    margin: 0; 
    padding: 0; 
}