Làm cách nào để lấp đầy 100% số div được định vị hoàn toàn? (IE7 +)

Question

thể trùng lặp:
CSS height 100% in IE7

Tôi muốn có một khối tập trung vào một trang web đã điền đến 100% bởi một div đứa trẻ.

Đây là mã HTML của tôi:

<div id="parent"> 
    <div id="child"></div> 
</div> 

Đây là CSS của tôi:

#parent { 
    position: absolute; 
    background-color: blue; 
    top: 2em; 
    left: 4em; 
    bottom: 3em; 
    right: 2em; 
} 

#child { 
    position: relative; 
    background-color: red; 
    height: 100%; 
} 

Và đây là một JSfiddle: http://jsfiddle.net/XMS2G/1/

Vấn đề là trong Internet Explorer 7, trình duyệt không khiến div con mở rộng thành toàn bộ div cha. Làm thế nào tôi sẽ thực hiện điều này mà không cần sử dụng Javascript?

Answer 1

Cân nhắc sử dụng position:absolute cho trẻ em. Và sau đó chỉ cần sử dụng top:0px; bottom:0px; right:0px; left:0px;

Tôi nghĩ rằng nó sẽ hoạt động.

Answer 2

Có thể bạn sẽ phải đặt chiều rộng được mã hóa cứng cho DIV gốc để khiến IE7 hoạt động tốt. việc định tâm có thể được thực hiện với "margin-left: auto;" "margin-right: auto;" css.

Answer 3

Bạn cần phải cung cấp cho các con position: absolute và thiết lập left, right, top, bottom-0.

See it in action.