Quảng cáo
Cách đặt chiều cao của DIV thành 100% bằng CSS
Chủ đề: HTML / CSSBài trước|Bài tiếp
Trả lời: Đặt chiều cao 100% cho phần tử bao quanh nó
Nếu bạn cố gắng đặt chiều cao của vùng chứa DIV thành 100% cửa sổ trình duyệt bằng cách sử dụng quy tắc kiểu height: 100%; thì nó không hoạt động, vì phần trăm (%) là một đơn vị tương đối nên kết quả chiều cao của DIV phụ thuộc vào chiều cao của phần tử cha (phần tử bao quanh nó).
Ví dụ, nếu bạn xem xét ví dụ sau, .container div có hai phần tử cha: phần tử <body>và phần tử <html>. Và chúng ta đều biết rằng giá trị mặc định của thuộc tính height là auto, vì vậy nếu chúng ta cũng đặt chiều cao của các phần tử <body>và <html> thành 100%, thì chiều cao kết quả của div vùng chứa sẽ bằng 100% chiều cao của cửa sổ trình duyệt.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set DIV Height to 100% Using CSS</title>
<style>
html, body {
height: 100%;
margin: 0px;
}
.container {
height: 100%;
background: #f0e68c;
}
</style>
</head>
<body>
<div class="container">The height of this DIV element is equal to the 100% height of its parent element's height.</div>
</body>
</html>Câu hỏi liên quan
Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này:
- Tạo danh sách tùy chỉnh ul li với hình ảnh?
- Làm sao để thay đổi kích thước hình ảnh bằng CSS?
- Hướng dẫn cách làm nổi bật nền của hàng trong bảng luân phiên bằng CSS
- Độ dài tối đa của tiêu đề và thẻ mô tả trong HTML cho SEO là bao nhiêu
- Cách xóa khoảng trắng thừa bên dưới hình ảnh bằng CSS
Advertisements