Computer >> Máy Tính >  >> Lập trình >> CSS

Làm cách nào để kéo giãn các phần tử để vừa với toàn bộ chiều cao của cửa sổ trình duyệt bằng CSS?


Để kéo giãn các phần tử cho vừa với toàn bộ chiều cao của cửa sổ trình duyệt bằng CSS, mã như sau -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
   *{
      box-sizing: border-box;
   }
   html, body {
      height: 100%;
      margin: 0;
   }
   .fullHeight{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      height: 100%;
      background: rgb(135, 27, 207);
      color:white;
      font-size: 40px;
      padding: 40px;
   }
</style>
</head>
<body>
<div class="fullHeight">This div element will stretch to the whole height and width of the
window</div>
</body>
</html>

Đầu ra

Đoạn mã trên sẽ tạo ra kết quả sau -

Làm cách nào để kéo giãn các phần tử để vừa với toàn bộ chiều cao của cửa sổ trình duyệt bằng CSS?