Tạo một div lấp đầy chiều cao của không gian màn hình còn lại

Đây có lẽ sẽ là một vấn đề cơ bản và nó có thể được giải quyết trong một thời gian ngắn. Tuy nhiên sau một vài lần thử thì nó vẫn chưa được như ý muốn. Nhiều người lại quay sang sử dụng JS để giải quyết vấn đề này. Vì vậy ở bài

Đây có lẽ sẽ là một vấn đề cơ bản và nó có thể được giải quyết trong một thời gian ngắn. Tuy nhiên sau một vài lần thử thì nó vẫn chưa được như ý muốn. Nhiều người lại quay sang sử dụng JS để giải quyết vấn đề này. Vì vậy ở bài viết lần này mình xin giới thiệu một vài cách sử dụng CSS để giải quyết vấn đề trên.

Cách 1: Sử dụng flex

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .classParent {
      display: flex;
      flex-flow: column;
      height: 500px;
      width: 50%;
      margin: auto;
    }

    .childOne {
      background-color: green;
      color: #fff;
    }

    .childTwo {
      background-color: #DDDDDD;
      flex-grow : 1;
    }
  </style>
</head>
<body>
  <div class="classParent">
    <div class="childOne">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia architecto quaerat, laborum tempore ullam ab ea consequatur veniam ut explicabo cum quas libero repellat laboriosam aspernatur quae culpa nemo, odio.
    </div>
    <div class="childTwo">
        Thẻ div này sẽ dài hết chiều cao còn lại của parent.
    </div>
  </div>
</body>
</html>

Kết quả sẽ đạt được là:

Ưu điểm: Dễ thực hiện

Nhược điểm: một số trình duyệt không hỗ trợ

Cách 2: Sử dụng position Absolute

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .classParent {
      height: 500px;
      width: 50%;
      margin:auto;
      position: relative;
    }

    .childOne {
      background-color: green;
      color: #fff;
      height: 100px;
    }

    .childTwo {
      background-color: #DDDDDD;
      position: absolute;
      top: 100px;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="classParent">
    <div class="childOne">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia architecto quaerat, laborum tempore ullam ab ea consequatur veniam ut explicabo cum quas libero repellat laboriosam aspernatur quae culpa nemo, odio.
    </div>
    <div class="childTwo">
        Thẻ div này sẽ dài hết chiều cao còn lại của parent.
    </div>
  </div>
</body>
</html>

Kết quả là:

Ưu điểm: dễ sử dụng

Nhược điểm: Bạn phải cố định chiều cao của childOne (không linh hoạt)

Cách 3: Sử dụng Tables (display: table)

Bằng cách này chúng ta có thể phân phối không gian đã có trong các div con và gán chiều cao cố định cho một số phần tử, các phần tử khác sẽ kết thúc bằng chiều cao còn lại

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .classParent {
      display: table;
      height: 500px;
      width: 50%;
      margin:auto;
    }

    .childOne {
      background-color: green;
      color: #fff;
      display: table-row;
      height: 100px;
    }

    .childTwo {
      background-color: #DDDDDD;
      display: table-row;
    }
  </style>
</head>
<body>
  <div class="classParent">
    <div class="childOne">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia architecto quaerat, laborum tempore ullam ab ea consequatur veniam ut explicabo cum quas libero repellat laboriosam aspernatur quae culpa nemo, odio.
    </div>
    <div class="childTwo">
        Thẻ div này sẽ dài hết chiều cao còn lại của parent.
    </div>
  </div>
</body>
</html>

Kết quả là:

Ưu điểm: Không cần fix height

Nhược điểm: Có thể gây ra một số tác dụng phụ với layout

Cách 4: Sử dụng CSS3 calc

Cách này sử dụng hàm calc để gán chiều cao được tính từ tổng chiều cao trừ đi chiều cao của phần tử khác.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .classParent {
      height: 500px;
      width: 50%;
      margin:auto;
    }

    .childOne {
      background-color: green;
      color: #fff;
      height: 100px;
    }

    .childTwo {
      background-color: #DDDDDD;
      height: calc(100% - 100px);
    }
  </style>
</head>
<body>
  <div class="classParent">
    <div class="childOne">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia architecto quaerat, laborum tempore ullam ab ea consequatur veniam ut explicabo cum quas libero repellat laboriosam aspernatur quae culpa nemo, odio.
    </div>
    <div class="childTwo">
        Thẻ div này sẽ dài hết chiều cao còn lại của parent.
    </div>
  </div>
</body>
</html>

Kết quả:

Ưu điểm: dễ sử dụng

Nhược điểm: Một số trình duyệt không hỗ trợ, khó để maintain

Kết luận

Như vậy mình cùng các bạn đã cùng nhau đi tìm hiểu về một số cách để cho một thẻ div con dài hết phần còn lại của thẻ div cha. Chúc các bạn học tập hiệu quả.

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ