+4

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 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ả.


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí