Điều gì có nghĩa là cung cấp cho div a style = 'height: 100%'?

Question

Có rất nhiều câu hỏi về SO liên quan đến điều này, nhưng những cái tôi quét là tất cả cho các tình huống cụ thể chi tiết. Điều tôi muốn biết là ở mức khái niệm, có nghĩa là gì khi nói:

<div style='height:100%'> 

Mức độ cao là 100%? 100% những gì?

[EDIT]

followup câu hỏi: Nếu 100% đại diện cho chiều cao của cha mẹ, nhưng mẹ là < cơ thể > và không có chiều cao khác hơn so với chiều cao của div, sau đó có nghĩa gì? Nó có vẻ được định nghĩa đệ quy.

Answer 1

100% chiều cao của vùng chứa chính.

Xem ở đây: http://jsfiddle.net/6VRn6/

Nếu bạn muốn sử dụng phương pháp này để làm cho các div 100% chiều cao của trang, bạn phải xác định chiều cao như 100% của cơ thể và html là tốt.

body, html { 
    height: 100%; 
} 

Khi bạn không chỉ định một html hoặc body chiều cao, chiều cao của họ là tổng của những đỉnh cao của các yếu tố trong đó.

Updated demo hiển thị thông tin này. Chúng tôi có div 200px với đường viền 2px tổng cộng 204px và sau đó là div trạng thái 40px. Chiều cao body phải là 244px. Bây giờ, nếu bạn thêm CSS ở trên vào trang, chiều cao sẽ là chiều cao của góc phần tư bên phải dưới cùng của jsfiddle. Hãy thử thêm nó và chạy lại mã. Sau đó thay đổi kích thước ngăn kết quả và chạy lại nó để xem thay đổi chiều cao tương ứng.

Answer 2

100% số offsetParent. Trong hầu hết các trường hợp, đó là tài liệu. Nó cũng có thể là một phần tử có position khác với static hoặc một thành phần của bảng.

Answer 3

Chiều cao: 100% có nghĩa là: Làm cho div lớn như cha mẹ!

Answer 4

Nó chỉ có nghĩa là 100% div hoặc class hoặc tag nó được bao bọc bên trong. Cố gắng có một ý tưởng hơi này:

{--parent loop { ..height 100% of above loop .. } }