Làm thế nào để tôi giữ hai div bên cạnh nhau có cùng chiều cao?

440

Tôi có hai divs cạnh nhau. Tôi muốn chiều cao của chúng là như nhau, và giữ nguyên nếu một trong số chúng thay đổi kích thước. Tôi không thể tìm ra cái này mặc dù. Ý tưởng?

Để làm rõ câu hỏi khó hiểu của tôi, tôi muốn cả hai hộp luôn có cùng kích thước, vì vậy nếu một hộp phát triển vì văn bản được đặt vào đó, thì hộp còn lại sẽ phát triển để phù hợp với chiều cao.

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>
Mở rộng đoạn trích

html  css  html-table  flexbox 
— NibblyPig
nguồn
Bạn có muốn rằng nếu một trong số chúng ngày càng lớn hơn so với cái còn lại sẽ giữ nguyên kích thước chiều cao không?
— Vũ Vương
Một ví dụ không phải là một giải pháp nhưng trong một môi trường có thể chỉnh sửa có thể được tìm thấy ở đây: jsfiddle.net/PCJUQ
— MvanGeest
— C. Hare

Câu trả lời:

591

Hộp linh hoạt

Với flexbox, đó là một tuyên bố duy nhất:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
Mở rộng đoạn trích

Tiền tố có thể được yêu cầu cho các trình duyệt cũ hơn, xem hỗ trợ trình duyệt .

— Pavlo
nguồn
17
flexbox làm việc như một lá bùa. Nếu bạn đang phát triển một thiết kế đáp ứng và bạn muốn div thứ hai của mình đi xuống trong các màn hình nhỏ hơn, bạn sẽ cần đặt .row để hiển thị: block; trong truy vấn phương tiện truyền thông của bạn.
— Nick Zulu
7
@NickZulu Tôi tin rằng trong trường hợp này bạn nên đặt flex-direction: column: jsfiddle.net/sdsgW/1
— Pavlo
1
@Eckstein không cần thiết cho cả hai giải pháp. Xem bản demo.
— Pavlo
3
điều này không hiệu quả với tôi cho đến khi tôi thêm chiều cao: 100%; đến các cột trẻ em
— Jacob Raccuia
1
Có thể làm cho một div con cụ thể xác định chiều cao của người kia không? Vì vậy, nếu nội dung của div con khác thay đổi, nó không thể thay đổi chiều cao của div cụ thể đó
— Narek Malkhasyan
149

Đây là một vấn đề phổ biến mà nhiều người đã gặp phải, nhưng may mắn thay, một số bộ óc thông minh như Ed Eliot trên blog của anh ấy đã đăng các giải pháp của họ lên mạng.

Về cơ bản những gì bạn làm là làm cho cả div / cột rất cao bằng cách thêm một padding-bottom: 100%và sau đó "lừa trình duyệt" nghĩ rằng chúng không sử dụng cao như vậy margin-bottom: -100%. Nó được giải thích tốt hơn bởi Ed Eliot trên blog của mình, trong đó cũng bao gồm nhiều ví dụ.

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}
<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>
Mở rộng đoạn trích

— lambda
nguồn
1
Giải thích về One True Layout hơi kém, nhưng sau khi kiểm tra liên kết đầu tiên, tôi đã triển khai nó tốt từ một trong những ví dụ anh ấy đã sử dụng. Tuy nhiên, điều đó thực sự tồi tệ vì bạn phải sử dụng một hình ảnh để thể hiện đường viền dưới cùng của các cột và điều đó không rõ ràng để hỗ trợ nhiều trình duyệt. Tuy nhiên, nó hoạt động và nó không phụ thuộc vào javascript, vì vậy tôi sẽ đánh dấu nó là chính xác. Cảm ơn!
— NibblyPig
Điều này dường như không hoạt động trong các trình duyệt IE cũ (vâng, thật không may, tôi vẫn phải hỗ trợ IE6). Bất kỳ cách nào để làm cho điều này tương thích?
— Strongriley
1
@strongriley Thanh toán Blog của Ed Eliot: ejeliot.com/blog/61 Nó sẽ hoạt động trong IE6. Có lẽ vấn đề được gây ra ở nơi khác?
— mqchen
1
Điều này phá vỡ nếu cửa sổ quá hẹp và các div được đặt bên dưới nhau.
— WhyNotHugo
1
Làm thế nào để bạn xác định phần đệm ô mà bạn thực sự muốn có trong ô của bảng, ví dụ: padding: 7px 10pxnếu thuộc padding-bottomtính được đặt thành 100%? (PS overflow:hiddencũng được yêu cầu cho tôi trên row)
— user1063287
55

Đây là một lĩnh vực mà CSS chưa bao giờ thực sự có bất kỳ giải pháp nào - bạn sẽ sử dụng <table>các thẻ (hoặc giả mạo chúng bằng các display:table*giá trị CSS ), vì đó là nơi duy nhất mà một người giữ một loạt các yếu tố có cùng chiều cao được thực hiện.

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

Điều này hoạt động trong tất cả các phiên bản Firefox, Chrome và Safari, Opera từ ít nhất là phiên bản 8 và trong IE từ phiên bản 8.

— Paul D. Chờ đợi
nguồn
5
Giải pháp này không có sẵn cho những người cần hỗ trợ IE6 / IE7, nhưng tôi tin rằng nó là sạch nhất.
— twsaef
2
Câu trả lời này là HOÀN HẢO! chỉ là một lời nhắc nhỏ: có thể xảy ra việc một số khách hàng yêu cầu "bảng" thay vì "bảng hàng"
— tiborka
@ user2025810: aw, cảm ơn bạn. Bạn có biết khách hàng nào yêu cầu tablethay vì table-row?
— Paul D. Chờ đợi
@ user2025810: yike, không thể nói rằng tôi đã từng thử nghiệm điều đó :) Mặc dù vậy, rất vui được biết, chúc mừng. (Với trọng tâm PDF của nó, tôi cá là nó hỗ trợ một số tính năng liên quan đến in của CSS 2.1 không được triển khai tốt trong các trình duyệt.)
— Paul D. Waite
7
Với giải pháp này - hãy quên việc sử dụng tỷ lệ phần trăm widthcho div của bạn, trừ khi bạn thêm display: tablevào phần tử cha, điều này sẽ làm mọi thứ rối tung lên.
— Alex G
42

Sử dụng jQuery

Sử dụng jQuery, bạn có thể thực hiện nó trong một tập lệnh một dòng siêu đơn giản.

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

Sử dụng CSS

Điều này thú vị hơn một chút. Kỹ thuật này được gọi là Cột Faux . Nhiều hay ít bạn không thực sự thiết lập các thực tế chiều cao là giống nhau, nhưng bạn dàn dựng một số yếu tố đồ họa để họ tìm kiếm cùng một chiều cao.

— Derek Adair
nguồn
Tôi nghĩ rằng sử dụng JavaScript là một phương pháp rất tốt. Vấn đề là - nó sụp đổ nếu bị vô hiệu hóa. Tôi nghĩ rằng dù sao tôi cũng sẽ sử dụng cái này và xây dựng dự phòng tốt nhất có thể; -) Cảm ơn!
— nicorellius
13
Điều này ngụ ý rằng chiều cao của cộtOne luôn lớn hơn cộtTwo.
— Sébastien Richer
1
Bạn nên so sánh chiều cao của cột trước khi áp dụng chiều cao cho chúng. Tôi nghĩ rằng js là phương pháp tốt nhất cho vấn đề này, hầu như tất cả các trình duyệt đều được bật js, nếu không, họ nên thoát khỏi trang web của bạn và nhiều trang web khác.
— SalmanShariati
6
Điều này cũng sẽ chỉ hoạt động khi trang được tải lần đầu tiên. Nếu cửa sổ sau đó được thay đổi kích thước, khiến các div thay đổi kích thước thì chúng sẽ không đồng bộ hóa
— ikariw
16

Tôi ngạc nhiên khi không ai đề cập đến kỹ thuật Cột tuyệt đối (rất cũ nhưng đáng tin cậy): http://24ways.org/2008/absolute-columns/

Theo tôi, nó vượt trội hơn nhiều so với kỹ thuật của cả Faux Cột và One True Layout.

Ý tưởng chung là một yếu tố có position: absolute;ý chí chống lại yếu tố cha mẹ gần nhất có position: relative;. Sau đó, bạn kéo dài một cột để lấp đầy 100% chiều cao bằng cách gán cả a top: 0px;và bottom: 0px;(hoặc bất kỳ pixel / phần trăm nào bạn thực sự cần.) Đây là một ví dụ:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>
— geofflee
nguồn
1
Nếu cột bên phải có nhiều dòng hơn bên trái, nội dung bị tràn.
— David
11

Bạn có thể sử dụng Plugin Equal Heights của Jquery để thực hiện, các plugin này làm cho tất cả các div có cùng chiều cao với nhau. Nếu một trong số họ phát triển và người khác cũng sẽ phát triển.

Đây là một mẫu thực hiện

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Đây là liên kết

http://www.cssnewbie.com/equalheights-jquery-plugin/

— Starx
nguồn
8

Bạn có thể sử dụng Cột Faux .

Về cơ bản, nó sử dụng một hình ảnh nền trong một DIV có chứa để mô phỏng hai DIV có chiều cao bằng nhau. Sử dụng kỹ thuật này cũng cho phép bạn thêm bóng, góc tròn, đường viền tùy chỉnh hoặc các mẫu ngộ nghĩnh khác vào thùng chứa của bạn.

Chỉ hoạt động với các hộp có chiều rộng cố định mặc dù.

Được thử nghiệm tốt và làm việc đúng cách trong mọi trình duyệt.

— Arve Systad
nguồn
7

Chỉ cần phát hiện chủ đề này trong khi tìm kiếm câu trả lời này rất. Tôi chỉ tạo một hàm jQuery nhỏ, hy vọng điều này có ích, hoạt động như một cơ duyên:

JAVASCRIPT

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>
— Mike Wells
nguồn
1
Tôi đã sử dụng lớp ngoài cùng để bao gồm phần đệm và viền. Đây là giải pháp sạch nhất tôi nghĩ.
— Sébastien Richer
Giải pháp hoàn hảo tôi đang tìm kiếm. Các giải pháp khác tốt cho trường hợp một hàng có một vài cột nhưng cách tiếp cận này tốt hơn cho nội dung html phức tạp. Thêm nhỏ: Khi thay đổi kích thước tài liệu trong trang đáp ứng, chiều cao nội dung không thay đổi do đã sửa. Vì vậy, tôi đã thêm $ ('. Inside'). Css ({height: "ban đầu"}); trước 'mỗi chức năng' để đặt chiều cao thành mặc định.
— bafsar
5

Cách lưới CSS

Cách hiện đại để làm điều này (cũng tránh phải khai báo <div class="row"></div>-wrapper xung quanh mỗi hai mục) sẽ là sử dụng lưới CSS. Điều này cũng cho phép bạn dễ dàng kiểm soát các khoảng trống giữa các hàng / cột mục của bạn.

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}
<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>
Mở rộng đoạn trích

— kết nối
nguồn
4

Câu hỏi này đã được hỏi 6 năm trước, nhưng vẫn xứng đáng để đưa ra một câu trả lời đơn giản với bố cục flexbox ngày nay.

Chỉ cần thêm CSS sau đây cho cha <div>, nó sẽ hoạt động.

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

Hai dòng đầu tiên khai báo nó sẽ được hiển thị dưới dạng flexbox. Và flex-direction: rownói với các trình duyệt rằng con của nó sẽ được hiển thị trong các cột. Và align-items: stretchsẽ đáp ứng yêu cầu rằng tất cả các yếu tố trẻ em sẽ kéo dài đến cùng một chiều cao, một trong số chúng trở nên cao hơn.

— Hegwin
nguồn
1
@TylerH Nhưng được hỏi đã chỉnh sửa câu hỏi của anh ấy và thêm vào I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.đó không được đề cập trong câu trả lời được chấp nhận ... Tôi vừa hoàn thành ở đây. Có lẽ tôi nên bình luận nó về câu trả lời được chấp nhận?
— Hegwin
1
nó không được đề cập rõ ràng bởi vì nó đã được bao phủ bởi khai báo CSS đơn giản. Mở Snippet của câu trả lời trong toàn màn hình và thay đổi kích thước cửa sổ trình duyệt của bạn để xem; chúng giữ nguyên kích thước với nhau.
— TylerH
1
Ngay cả khi câu trả lời được chấp nhận sử dụng flexbox, thì câu trả lời này có một cách tiếp cận khác. align-items: Stretch là điều đặt tôi vào con đường giải quyết vấn đề của mình trong một tình huống rất đặc biệt.
— BenoitLussier
Không phải align-items: stretch;là mặc định của flex?
— madav
3

Sử dụng CSS Flexbox và min-height làm việc cho tôi

nhập mô tả hình ảnh ở đây

Giả sử bạn có một thùng chứa có hai div bên trong và bạn muốn hai div đó có cùng chiều cao.

Bạn sẽ đặt ' display: flex ' trên container cũng như ' align-items: Stretch '

Sau đó, chỉ cần cung cấp cho trẻ em div ' chiều cao tối thiểu ' là 100%

Xem mã dưới đây

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}
<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>
Mở rộng đoạn trích

— RealMJDev
nguồn
2

Nếu bạn không nhớ một trong những người divlà bậc thầy và chỉ ra chiều cao cho cả hai divthì đó là:

Vĩ cầm

Không có vấn đề gì, divbên phải sẽ mở rộng hoặc squish & tràn để phù hợp với chiều cao của divbên trái.

Cả hai divphải là con ngay lập tức của một container và phải chỉ định chiều rộng của chúng trong nó.

CSS có liên quan:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}
— Hashbrown
nguồn
2

Tôi thích sử dụng các yếu tố giả để đạt được điều này. Bạn có thể sử dụng nó làm nền của nội dung và để chúng lấp đầy khoảng trống.

Với các phương pháp này, bạn có thể đặt lề giữa các cột, viền, v.v.

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}
<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>
Mở rộng đoạn trích

— Adrian Menendez
nguồn
1

Câu đố

HTML

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

CSS

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}
— drjorgepolanco
nguồn
1

Tôi đã thử hầu hết tất cả các phương pháp được đề cập ở trên, nhưng giải pháp flexbox sẽ không hoạt động chính xác với Safari và các phương thức bố trí lưới sẽ không hoạt động chính xác với các phiên bản IE cũ hơn.

Giải pháp này phù hợp với tất cả các màn hình và tương thích với nhiều trình duyệt:

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

Phương pháp trên sẽ bằng chiều cao các ô và đối với các màn hình nhỏ hơn như điện thoại di động hoặc máy tính bảng, chúng ta có thể sử dụng @mediaphương pháp được đề cập ở trên.

— Jodyshop
nguồn
0

bạn có thể sử dụng jQuery để đạt được điều này một cách dễ dàng.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

HTML

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

Bạn sẽ cần bao gồm jQuery

— pixeltocode
nguồn
1
Điều này sẽ không hoạt động nếu cả hai <div>có nội dung động. Lý do tôi nói là nếu <div class="right">có nhiều nội dung mà vấn đề khác phát sinh.
— Surya
0

Tôi biết đó là một thời gian dài nhưng dù sao tôi cũng chia sẻ giải pháp của mình. Đây là một thủ thuật jQuery.

--- HTML 

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

---- CSS

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

--- YÊU CẦU

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>
— Roy Vincent
nguồn
-1

Đây là một plugin jQuery đặt chiều cao bằng nhau cho tất cả các phần tử trên cùng một hàng (bằng cách kiểm tra offset.top của phần tử). Vì vậy, nếu mảng jQuery của bạn chứa các phần tử từ nhiều hơn một hàng (offset.top khác nhau), mỗi hàng sẽ có chiều cao riêng biệt, dựa trên phần tử có chiều cao tối đa trên hàng đó.

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};

— Déján Kőŕdić
nguồn
-2 
    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });
— tcao
nguồn
1
Vui lòng cung cấp bất kỳ bình luận cho câu trả lời của bạn.
— sgnsajgon
-2

Tôi đã có cùng một vấn đề vì vậy tôi đã tạo ra chức năng nhỏ này bằng cách sử dụng jquery vì jquery là một phần của mọi ứng dụng web hiện nay.

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

Bạn có thể gọi chức năng này trên trang sự kiện sẵn sàng

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

Tôi mong công việc này phù hợp với bạn.

— Lập trình viên bậc thầy
nguồn
-3

Gần đây tôi đã bắt gặp điều này và không thực sự thích các giải pháp nên tôi đã thử trải nghiệm.

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

— tushar747
nguồn
-4 
<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

Những gì tôi đã làm ở đây là thay đổi chiều cao thành chiều cao tối thiểu và cho nó một giá trị cố định. nếu một trong số chúng bị thay đổi kích thước thì cái còn lại sẽ giữ nguyên chiều cao. không chắc đây có phải là thứ bạn muốn không

— Vũ Vương
nguồn
OP muốn các div luôn có cùng chiều cao.
— Simon Forsberg
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.