chiều cao: 100% hoặc chiều cao tối thiểu: 100% cho phần tử html và nội dung?

Question

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

html, body { 
    height: 100%; 
} 

hoặc

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

Vâng, đây không phải là ý kiến ​​dựa theo mỗi phương pháp đều có lỗ hổng riêng của mình, vì vậy cách khuyến khích để đi cho và tại sao là gì?

Answer 1

Nếu bạn đang cố gắng áp dụng hình nền cho html và body, hãy lấp đầy toàn bộ cửa sổ trình duyệt. Sử dụng điều này thay vì:

html { 
    height: 100%; 
} 

body { 
    min-height: 100%; 
} 

Lý luận của tôi được đưa ra here (nơi tôi giải thích một cách toàn diện như thế nào để áp dụng hình nền theo cách này):

Ngẫu nhiên, lý do tại sao bạn cần phải xác định height và min-height tương ứng với html và body là do không có phần tử nào có chiều cao nội tại. Cả hai đều là height: auto theo mặc định. Đó là chế độ xem có chiều cao 100%, do đó, height: 100% được lấy từ chế độ xem, sau đó áp dụng cho body ở mứ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 cho body mở rộng với nội dung khi chúng bắt đầu phát triển vượt quá chiều cao của chế độ xem. Về mặt kỹ thuật, điều này không ngăn chặn nội dung di chuyển, nhưng nó gây ra body để lại khoảng trống dưới màn hình đầu tiên, thường không mong muốn.

Cách thứ hai, sử dụng min-height: 100% trên cả hai, không gây body mở rộng với chiều cao đầy đủ của html vì min-height với một tỷ lệ không hoạt động trên body trừ html có một rõ ràng height.

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