height: 100% VS min-height: 100%

tôi sử dụng này css để thiết lập một <div> với chiều cao tối đaheight: 100% VS min-height: 100%

bất cứ ai có thể cho tôi một câu trả lời chung, sự khác biệt giữa height: 100% và min-height: 100% là gì?

2010-02-26 Dan

fyi min-height không được tất cả các trình duyệt hỗ trợ – marcgg

Chỉ khi bạn đánh dấu IE <= 6 làm trình duyệt. Bất cứ thứ gì ngoài đó chỉ hỗ trợ nó. – BalusC

Dưới đây là một lời giải thích từ W3C (link):

Thuật toán sau đây mô tả cách thức hai thuộc tính [min-height và max-height] ảnh hưởng đến giá trị sử dụng của các 'cao' bất động sản:

Chiều cao được sử dụng dự kiến được tính (không có 'chiều cao tối thiểu' và 'chiều cao tối đa') theo các quy tắc trong "Tính chiều cao và lề" ở trên.

Nếu chiều cao dự kiến này lớn hơn 'chiều cao tối đa', các quy tắc trên được áp dụng lại, nhưng lần này sử dụng giá trị 'chiều cao tối đa' làm giá trị được tính cho 'chiều cao'.

Nếu chiều cao kết quả nhỏ hơn 'min-height', các quy tắc trên được áp dụng lại, nhưng lần này sử dụng giá trị 'min-height' làm giá trị được tính cho 'height'.

Để tóm tắt: Về cơ bản, nếu chiều cao tối thiểu lớn hơn chiều cao (nếu chiều cao rõ ràng được chỉ định hay không), thì chiều cao tối thiểu được sử dụng làm chiều cao. Nếu min-height nhỏ hơn chiều cao của nó, thì chiều cao min sẽ không có tác dụng.

Đối với trường hợp cụ thể bạn cung cấp, chỉ định height:100% làm cho chiều cao của phần tử bằng với chiều cao của khối chứa. (Tuy nhiên, điều này có thể bị overruled, ví dụ nếu bạn cũng chỉ định max-height:50%.) Chỉ định min-height:100% có nghĩa là nếu chiều cao được tính nhỏ hơn 100%, trên thực tế ngay cả khi bạn chỉ định rõ ràng chiều cao dưới 100%, nó được coi như bạn đã nói height:100%. Lưu ý rằng một khác biệt chính là chiều cao tối đa có thể vượt quá chiều cao nhưng không thể ghi đè chiều cao tối thiểu (vì chiều cao tối đa được xem là sau chiều cao nhưng trước chiều cao tối thiểu theo đề xuất W3C được trích dẫn ở trên).

Nguồn

2010-02-26 13:34:31

chiều cao sẽ đưa phần tử của bạn lên kích thước 100% của vùng chứa.

chiều cao tối thiểu sẽ đặt yếu tố này vào tối thiểu 100% kích thước vùng chứa

nhưng tại sao bạn vẫn muốn làm điều đó? nếu min-height là 100% nó sẽ không có ảnh hưởng gì trong quan điểm của tôi ...

sau khi một số nghiên cứu trong IE7 nó có thể cung cấp cho bạn một giải pháp cho một vấn đề:

http://www.search-this.com/2007/02/05/css-min-height-explained/

Nguồn

2010-02-26 13:22:06 Kennethvr

height: 100% sẽ đi đến 100% chiều cao container; min-height: 100% nên mở rộng quá chiều cao của vùng chứa nếu cần.

Hãy nhớ rằng độ cao tối thiểu không được hỗ trợ trong IE.

Nguồn

2010-02-26 13:23:32 Nalum

Cách sử dụng thực tế duy nhất tôi đã thấy về chiều cao tối thiểu là gắn chân trang vào cuối trang.Xét đoạn mã sau:

<html> 
    <head></head> 
    <body style="height: 100%"> 
    <div style="height: 100%"> 
     <div style="height: auto; min-height: 100%; background-color: blue;"> 
     <div class="main" style="padding-bottom: 300px;"> 
     </div> 
     </div> 
     <div class="footer" style="height: 300px; background-color: red; margin-top: -300px;"></div> 
    </div> 
    </body> 
</html>

đỏ đang bị mắc kẹt phía dưới cùng của cổng xem khi div chính là trống rỗng, và khi bạn điền div chính với nội dung, chân đỏ vẫn dính vào đáy của trang.

Để minh họa điểm, nếu bạn chỉ sử dụng chiều cao: 100% trên div chính và điền nó với nội dung, chân trang màu đỏ sẽ di chuột ở cuối chế độ xem. Chiều cao được chỉ định là 100% không mở rộng div chính bên ngoài giới hạn của khung nhìn như nó sẽ nếu bạn khai báo chiều cao: auto; chiều cao tối thiểu: 100%.

Nguồn

2010-02-26 15:25:37

Xin lỗi thưa bạn, nhưng bạn có thể giải thích ý nghĩa của "chiều cao: tự động" trong lớp "chính" không? Tôi đã nhìn thấy biểu thức này trong một số ví dụ về bố cục height100%. Một số thậm chí mã "chiều cao: tự động! Quan trọng". Tuy nhiên, tôi không hiểu quy tắc này hoạt động như thế nào – Dan

height: 100% VS min-height: 100%

Trả lời

Các vấn đề liên quan