Câu trả lời:
height: 100% cho phần tử 100% chiều cao của thùng chứa mẹ của nó.
height: auto có nghĩa là chiều cao phần tử sẽ phụ thuộc vào chiều cao của con cái nó.
Hãy xem xét các ví dụ sau:
chiều cao: 100%
<div style="height: 50px">
<div id="innerDiv" style="height: 100%">
</div>
</div>#innerDiv sắp có height: 50px
chiều cao: tự động
<div style="height: 50px">
<div id="innerDiv" style="height: auto">
<div id="evenInner" style="height: 10px">
</div>
</div>
</div>#innerDiv sắp có height: 10px
setting the height of the child element or the container element. Bạn có thể làm bất cứ điều gì bạn có, để đạt được thiết kế của bạn, miễn là bạn tuân theo sự nhất quán nhất định, tránh trùng lặp, giảm công việc lại, nhóm các bố cục chung. Nói tóm lại, phải có một hệ thống / mẫu cho công việc của bạn, để dễ đọc và thay đổi, và tất nhiên thực tế là nó sẽ hoạt động
autokhiến cho phần tử phát triển để chứa các nội dung của nó, VÀ nội dung của nó. Ngược lại, giá trị Chiều cao cố định không tăng (hoặc hiển thị) nội dung không thể vừa với chiều cao được khai báo. jsfiddle.net/m3f8y6xr/1 Câu trả lời này, tôi tin rằng, không đủ từ ngữ để làm cho nó buồn cười rằng phần tử sẽ phát triển để bao gồm tất cả nội dung, cho dù đó là văn bản của chính nó, hoặc nội dung của một đứa trẻ. Tất nhiên có thể lập luận rằng văn bản của chính nó cũng là một đứa trẻ. Điều này cung cấp xác nhận trực quan của hành vi.
Một chiều cao của 100% cho là, có lẽ, chiều cao của bạn cửa sổ bên trong của trình duyệt , bởi vì đó là chiều cao của mẹ , trang. Một autochiều cao sẽ là chiều cao tối thiểu của cần thiết để chứa .
Mặc định là height: autotrong trình duyệt, nhưng height: X%Xác định chiều cao theo tỷ lệ phần trăm của khối chứa.
height: 100% hoạt động nếu container cha có thuộc tính chiều cao được chỉ định khác, nó sẽ không hoạt động
10px + the size it needs for its own content- hãy xem jsfiddle