CSS - định chiều cao phần tử div bằng 100% chiều cao của cửa sổ trình duyệt

Em có một trang HTML với cấu trúc đơn giản như sau:

<!DOCTYPE html5>
<html>
<body>
    <div>100% height</div>
</body>
</html>

Bây giờ em cần định chiều cao cho phần tử <div> để nó cao đúng bằng 100% chiều cao của trình duyệt. Em thử với đoạn code sau:

div {
    height: 100%;
    min-height: 100%;
}

Nhưng vẫn không được và cũng không hiểu tại sao lại không được. Với đoạn code ở trên thì em sai ở đâu và cách khắc phục như thế nào?

1 Câu Trả Lời

Phan Quang Phan Quang

Height 100% tức là cao bằng thằng parent thôi, không phải cao bằng browser. Để dùng height 100% thì bạn phải set lần lượt từ html > body > div cha..100%.

Cách nhanh nhất là: Div { height: 100vh; }

Nội dung tối thiểu 100 ký tự

Câu Hỏi Liên Quan