div bên trong cần phải được 100% chiều cao

Question

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

<div id="container"> 
    <div id="left-container"> 
    </div> 

    <div id="right-container"> 
    </div> 
</div> 

Các container là 100% chiều cao (tôi đã kiểm tra nó với Firebug). Nhưng #left_container cũng cần phải 100% và không phải vậy!

Dưới đây là CSS của tôi và screenshot. Màu vàng phải là 100%. Màu vàng là nền của #left-container

html, body { 
    height: 100%; 
} 
#container { 
    position:relative; 
    margin: 0 auto; 
    width: 100%; 
    height:100%; 
    height: auto !important; 
    min-height:100%; 
    background: #fff; 
} 
#left-container { 
    width: 300px; 
    background: #ff0; 
    height:100%; 
    height: auto !important; 
    min-height:100%; 
} 

Answer 1

Bài viết này thảo luận về cả hai vấn đề và giải pháp một cách chi tiết:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

này có thể giúp quá:

<style> 
    #outer {position:absolute; height:auto; width:200px; border: 1px solid red; } 
    #inner {position:absolute; height:100%; width:20px; border:1px solid black; } 
</style> 

<div id='outer'> 
    <div id='inner'> 
    </div> 
    text 
</div> 

Xem ở đây để biết thêm chi tiết về các phần trên:
How to make a floated div 100% height of its parent?

Answer 2

Bạn sẽ có thể sử dụng chỉ

margin:0; 
padding:0; 
height:100%; 

Đối với conatainers để có được những gì bạn muốn.

Answer 3

Cách tốt nhất để tiếp cận vấn đề này là suy nghĩ bên ngoài hộp một chút. Không có lý do gì mà cả hai container cần phải kéo dài đến 100% nếu bạn chỉ quan tâm đến nền kéo dài cho cả hai. Có một kỹ thuật thực sự đơn giản gọi là Faux Columns trong đó bạn kết hợp hình nền cho cả hai thanh bên thành một hình nền đơn và đặt nền của vùng chứa chính thành hình ảnh đó. Khi một thanh bên dài kéo dài vùng chứa chính, nó sẽ làm giảm nền cho cả hai thanh bên.