height: 100% hay min-height: 100% cho html và các phần tử body?

Trong khi thiết kế bố cục, tôi đặt các html, bodyphần tử ' heightthành 100%nhưng trong một số trường hợp, điều này không thành công, vậy nên sử dụng cái gì?

html, body {
   height: 100%;
}

hoặc là

html, body {
   min-height: 100%;
}

Chà, đây không phải là ý kiến ​​dựa trên quan điểm vì mỗi phương pháp đều có những sai sót riêng, vậy cách được khuyến nghị để sử dụng là gì và tại sao?

Nếu bạn đang cố gắng áp dụng các hình ảnh nền cho htmlvà bodyđó fill lên toàn bộ cửa sổ trình duyệt, không phải. Sử dụng cái này thay thế:

html {
   height: 100%;
}

body {
   min-height: 100%;
}

Lý do của tôi được đưa ra ở đây (nơi tôi giải thích toàn diện cách áp dụng nền theo cách này):

Ngẫu nhiên, lý do tại sao bạn phải chỉ định heightvà min-heightđến htmlvà bodytương ứng là vì không phần tử nào có bất kỳ chiều cao nội tại nào. Cả hai đều là height: autotheo mặc định. Đó là chế độ xem có 100% chiều cao, do đó height: 100%được lấy từ chế độ xem, sau đó được áp dụng thành bodymức tối thiểu để cho phép cuộn nội dung.

Cách đầu tiên, sử dụng height: 100%trên cả hai, ngăn không bodycho nội dung của nó mở rộng khi chúng bắt đầu phát triển vượt quá chiều cao khung nhìn. Về mặt kỹ thuật, điều này không ngăn nội dung cuộn, nhưng nó gây ra bodymột khoảng trống bên dưới màn hình đầu tiên, điều này thường là không mong muốn.

Cách thứ hai, sử dụng min-height: 100%trên cả hai, không gây ra bodymở rộng đến chiều cao đầy đủ htmlbởi vì min-heightvới một tỷ lệ phần trăm không hoạt động bodytrừ khi htmlcó thông báo rõ ràng height.

Vì mục đích đầy đủ, phần 10 của CSS2.1 chứa tất cả các chi tiết, nhưng nó là một bài đọc cực kỳ phức tạp nên bạn có thể bỏ qua nếu không quan tâm đến bất kỳ điều gì ngoài những gì tôi đã giải thích ở đây.

Bạn có thể sử dụng vhđơn vị chiều cao khung nhìn ( ):

body {
    min-height: 100vh;
}

Nó liên quan đến màn hình, không phải chiều cao gốc, vì vậy bạn không cần chiều cao html: 100%.