Css - làm thế nào để 2 div có chiều cao bằng nhau


#1

Mọi người cho em hỏi, em muốn xây dựng 1 banner có giao diện như thế này:

Ý tưởng của em như sau:
Chia banner thành 2 div left và right.

Vậy làm sao để 2 div có chiều cao bằng nhau ạ.

  • Nếu set height là 1 giá trị cố định thì không responsive được do các thiết bị màn hình nhỏ thì text bị tràn ra khỏi giá trị height cố định đó.
  • Nếu div.right em thay vì để background, mà em chèn hình ảnh, thì ảnh có height lớn quá, lúc này div.left lại nhỏ hơn div.right
    Mong mọi người có giải pháp giúp em ạ

#2

bao bọc div.left và div.right bằng 1 div.parent sau đó set height div.parent và xử lý breakpoint để text không bị tràn. 2 div.left và div.right set height = 100%. vd như vậy :wink:


#3

Goị div.parent là cha của div.left và div.right
Bạn cài đặt CSS như sau:
.parent {
display: table;
width: 100%;
}
.left, .right {
display: table-cell;
width: 50%;
}
.right {
background-image: url; // url ảnh nền
background-position: center;
background-size: cover;
}
/* Responsive cho width < 768px (hoặc bao nhiêu tùy bạn muốn */
@media screen and (max-width: 767px) {
.left, .right {
display: block;
width: 100%;
}
Lưu ý; Trong trường hợp bạn nêu, do bạn muốn .right có background nên khi display block mà .right không có text bên trong thì height của .right sẽ là 0, nên sẽ không hiển thị được background. Nên với width < 768px (hoặc bao nhiêu tùy bạn muốn, có thể là 480px chẳng hạn) thì cũng nên display: none nó luôn.

Ngoài CSS ra, bạn có thể dùng JS + Jquery. Câu lệnh như sau:
$(’.right’).css(‘height’,$(’.left’).css(‘height’));
Với dòng lệnh này thì khi user truy cập vào website, height của div.right sẽ luôn được thiết lập = height của div.left. Nên responsive tốt cho mọi thiết bị. Tuy nhiên, nó lại có một hạn chế như này. JS chỉ được nạp khi user truy cập vào trang hoặc reset trang, nên khi user kéo thả trình duyệt để thay đổi width thì dòng lệnh trên sẽ không được thực hiện.

Hy vọng sẽ giúp cho bạn được ít nhiều!!!
Ai có cách hay hơn thì em cũng muốn học hỏi lắm ạ :slight_smile:


#4

Update cho bạn thêm 1 cách nữa: đó là dùng flex. Cách này cực kì đơn giản, mà mình thấy cũng khá hiệu quả
.parent {
display: flex;
}
Ở break point nào mà bạn muốn trở thành 1 cột thì chỉ cần:
.parent {
display: block;
}
Bạn có thể tìm hiểu chi tiết về flex tại đây: https://css-tricks.com/snippets/css/a-guide-to-flexbox/