İki yan yana div'i aynı yükseklikte nasıl tutarım?

441

Yan yana iki divim var. Bunların yüksekliğinin aynı olmasını ve onlardan biri yeniden boyutlandırılırsa aynı kalmasını istiyorum. Bunu anlayamıyorum. Fikirler?

Kafa karıştırıcı sorumu açıklığa kavuşturmak için, her iki kutunun da her zaman aynı boyutta olmasını istiyorum, bu yüzden metin içine yerleştirildiği için büyürse, diğeri yüksekliğe uyacak şekilde büyümelidir.

<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>
Snippet'i genişlet

html  css  html-table  flexbox 
— NibblyPig
kaynak
Bunlardan biri büyüyorsa, diğerinden daha fazla aynı boyutta kalacağını ister misiniz?
— Wai Wong
Çözüm olmayan ancak düzenlenebilir bir ortamda bir örnek burada bulunabilir: jsfiddle.net/PCJUQ
— MvanGeest
— C. Hare

Yanıtlar:

592

flexbox'a

Flexbox ile bu tek bir bildiridir:

.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>
Snippet'i genişlet

Eski tarayıcılar için ön ek gerekebilir; tarayıcı desteğine bakın .

— Pavlo
kaynak
17
flexbox bir cazibe gibi çalıştı. Duyarlı bir tasarım geliştiriyorsanız ve ikinci div'inizin daha küçük ekranlarda aşağı inmesini istiyorsanız .row öğesini görüntülemek için ayarlamanız gerekir: block; medya sorgunuzda.
— Nick Zulu
7
@NickZulu Bu durumda ayarlamanız gerektiğine inanıyorum flex-direction: column: jsfiddle.net/sdsgW/1
— Pavlo
1
@Eckstein her iki çözüm için de gerekli değildir. Demolara bakın.
— Pavlo
3
boy eklemeden önce bu benim için çalışmadı:% 100; sütunlarına git
— Jacob Raccuia
1
Bir çocuk divinin diğerinin yüksekliğini belirlemesini sağlamak mümkün müdür? Böylece, diğer alt div içeriği değişiyorsa, belirli bir div yüksekliğini değiştiremez
— Narek Malkhasyan
149

Bu, birçok kişinin karşılaştığı yaygın bir sorundur, ancak Neyse ki blogunda Ed Eliot'unki gibi bazı akıllı beyinler çözümlerini çevrimiçi olarak yayınladı.

Temelde yaptığınız şey hem div / sütunları çok uzun yapmaktır padding-bottom: 100%ve daha sonra o kadar uzun olmadığını düşünmek için "tarayıcıyı kandırmak" margin-bottom: -100%. Ed Eliot tarafından blogunda daha fazla açıklanmaktadır ve bu da birçok örnek içermektedir.

.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>
Snippet'i genişlet

— lambda
kaynak
1
One True Layout ile ilgili açıklama biraz zayıftı, ancak ilk bağlantıyı kontrol ettikten sonra kullandığı örneklerden birinden iyi uyguladım. Ancak gerçekten kötü, çünkü sütunların alt kenarlığını temsil etmek için bir görüntü kullanmanız gerekiyor ve tarayıcılar arası destek için şüpheli. Ancak işe yarıyor ve javascript'e güvenmiyor, bu yüzden doğru olarak işaretleyeceğim. Teşekkürler!
— NibblyPig
Bu eski IE tarayıcılarda çalışmıyor gibi görünüyor (evet, ne yazık ki hala IE6 desteklemek zorunda). Bunu uyumlu hale getirmenin herhangi bir yolu var mı?
— strongriley
1
@strongriley Checkout Ed Eliot'un blogu: ejeliot.com/blog/61 IE6'da çalışmalıdır. Belki de sorun başka bir yere neden olabilir?
— mqchen
1
Pencere çok dar ve div'ler birbirinin altına yerleştirilirse bu kırılır.
— WhyNotHugo
1
Tablo hücresinde gerçekten olmasını istediğiniz hücre dolgusunu nasıl tanımlarsınız, örneğin padding: 7px 10px, padding-bottomözellik% 100 olarak ayarlanmışsa? (PS overflow:hiddenbenim için de gerekliydi row)
— user1063287 19:18
55

Bu, CSS'nin hiçbir zaman gerçekten hiçbir çözümünün bulunmadığı bir alandır - "bir grup öğeyi aynı yükseklikte tut" un uygulandığı tek yer olduğu için <table>etiketleri kullanmaya başlıyorsunuz (veya CSS display:table*değerlerini kullanarak bunları sahtekâr hale getiriyorsunuz ).

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

Bu, Firefox, Chrome ve Safari'nin tüm sürümlerinde, en azından sürüm 8'den Opera'da ve sürüm 8'den IE'de çalışır.

— Paul D. Waite
kaynak
5
Bu çözüm IE6 / IE7'yi desteklemesi gereken kişiler için mevcut değildir, ancak bunun en temiz olduğuna inanıyorum.
— twsaef
2
bu cevap MÜKEMMEL! sadece küçük bir hatırlatma: bazı istemciler "tablo satırı" yerine "tablo" gerektirebilir
— tiborka
@ user2025810: aw, teşekkür ederim. Bunun tableyerine hangi müşterilerin gerekli olduğunu biliyor musunuz table-row?
— Paul D.Waite
@ user2025810: Evet, bunu test ettiğimi söyleyemem :) Yine de bilmek güzel, şerefe. (PDF odağı göz önüne alındığında, tarayıcılarda çok iyi uygulanmayan CSS 2.1'in baskı ile ilgili bazı özelliklerini desteklediğinden eminim.)
— Paul D. Waite
7
Bu çözümle - üst öğeye widtheklemediğiniz sürece, bölgeniz için yüzde kullanmayı unutmayın display: table, bu da işleri karıştırır.
— Alex G
42

JQuery kullanma

JQuery kullanarak, bunu süper basit bir tek satırlık komut dosyasında yapabilirsiniz.

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

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

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

CSS Kullanımı

Bu biraz daha ilginç. Bu tekniğe Sahte Sütunlar denir . Aşağı yukarı gerçek yüksekliği aynı olacak şekilde ayarlamazsınız , ancak bazı grafik öğeleri aynı yüksekliğe bakacak şekilde düzenlersiniz.

— Derek Adair
kaynak
Bence JavaScript kullanmak çok iyi bir yöntem. Sorun şu ki - devre dışı bırakılırsa parçalanıyor. Ben yine de kullanacağım ve elimden gelenin en iyi olasılığını inşa edecek düşünüyorum; -) Teşekkürler!
— nicorellius
13
Bu, columnOne'S yüksekliğinin her zaman columnTwo değerinden daha büyük olduğunu gösterir.
— Sébastien Richer
1
Sütun yüksekliğini uygulamadan önce sütunların yüksekliğini karşılaştırmalısınız. Ben js bu sorun için en iyi yöntem olduğunu düşünüyorum, neredeyse tüm tarayıcılar js etkin, değilse, web sitenizden ve diğer birçok web sitesi çıkmak gerekir.
— SalmanShariati
6
Bu yalnızca sayfa ilk yüklendiğinde de çalışır. Pencere yeniden boyutlandırılırsa, div'lerin yeniden boyutlandırılmasına neden olurlarsa, senkronizasyonda
— kalmazlar
16

Kimsenin (çok eski ama güvenilir) Mutlak Sütun tekniğinden bahsetmediğine şaşırdım: http://24ways.org/2008/absolute-columns/

Bence hem Faux Kolonlar hem de One True Layout tekniğinden çok daha üstündür.

Genel fikir şudur ki, bir eleman sahip position: absolute;olan en yakın üst öğeye göre konumlandırılır position: relative;. Daha sonra a hem atayarak% 100 yüksekliğini doldurmak için bir sütun germek top: 0px;ve bottom: 0px;İşte bir örnek (piksel / aslında ihtiyaç yüzdeleri veya her neyse.):

<!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
kaynak
1
Sağ sütunda soldan daha fazla satır varsa, içerik taşmaktadır.
— David
11

Bunu başarmak için Jquery'nin Eşit Yükseklik Eklentisini kullanabilirsiniz, bu eklentiler diğer tümüyle aynı yükseklikte div yapar. Eğer biri büyürse diğeri de büyürse.

İşte bir uygulama örneği

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.

Bağlantı burada

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

— Starx
kaynak
8

Sahte Sütunlar kullanabilirsiniz .

Temel olarak, iki eşit yükseklikli DIV'yi simüle etmek için içeren bir DIV'de arka plan görüntüsü kullanır. Bu tekniği kullanmak kaplarınıza gölgeler, yuvarlak köşeler, özel kenarlıklar veya diğer korkak desenler eklemenize de olanak tanır.

Ancak yalnızca sabit genişlikli kutularla çalışır.

Her tarayıcıda iyi test edilmiş ve düzgün çalışıyor.

— Arve Systad
kaynak
7

Bu cevabı ararken bu konuyu gördüm. Sadece küçük bir jQuery işlevi yaptım, umarım bu yardımcı olur, bir cazibe gibi çalışır:

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
kaynak
1
Dolgu ve kenarlıkları dahil etmek için outerHeight kullandım. Bu bence en temiz çözüm.
— Sébastien Richer
Aradığım mükemmel çözüm. Diğer çözümler, bir satırın birkaç sütuna sahip olması durumunda iyidir, ancak bu yaklaşım karmaşık html içeriği için daha iyidir. Küçük ekleme: Duyarlı sayfada belge yeniden boyutlandırıldığında, içerik yüksekliği sabit olduğu için değişmez. Bu yüzden $ ('. İnner'). Css ({height: "initial"}); yüksekliği varsayılan olarak ayarlamak için 'her işlev'den önce.
— bafsar
5

CSS ızgara yolu

Bunu yapmanın modern yolu ( <div class="row"></div>her iki öğenin etrafında bir sarıcı beyan etmek zorunda kalmaz) bir CSS ızgarası kullanmak olacaktır. Bu aynı zamanda öğe satırlarınız / sütunlarınız arasındaki boşlukları kolayca kontrol etmenizi sağlar.

.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>
Snippet'i genişlet

— connexo
kaynak
4

Bu soru 6 yıl önce soruldu, ancak bugünlerde flexbox düzeniyle basit bir cevap vermeye hala değer .

Sadece babaya aşağıdaki CSS ekleyin, <div>işe yarayacak.

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

İlk iki satır, flexbox olarak görüntüleneceğini bildirir. Ve flex-direction: rowtarayıcılara çocuklarının sütunlarda görüntüleneceğini söyler. Ve align-items: stretchtüm çocuk elemanlarının, biri yükseldikçe aynı yüksekliğe gerilmesi gerekliliğini karşılayacak.

— Hegwin
kaynak
1
@TylerH Ama sorusunu düzenledi ve 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.kabul edilen cevapta belirtilmeyen bir soru ekledi ... Burada sadece bir tamamlama yaptım. Belki de kabul edilen cevap hakkında yorum yapmalıydım?
— Hegwin
1
açık bir şekilde bahsedilmiyor çünkü zaten basit CSS bildirimi kapsamında. Yanıtlayan Snippet'ini tam ekranda açın ve görmek için tarayıcı pencerenizi yeniden boyutlandırın; birbirleriyle aynı boyutta kalırlar.
— TylerH
1
Kabul edilen cevap flexbox kullansa bile, bunun farklı bir yaklaşımı vardır. align-items: streç, beni çok özel bir durumda sorunumu çözme yoluna sokan şeydir.
— BenoitLussier
align-items: stretch;Flex varsayılan değil mi?
— madav
3

CSS Flexbox ve min-height kullanmak benim için çalıştı

resim açıklamasını buraya girin

İçinde iki bölme bulunan bir kabınız olduğunu ve bu iki bölmenin aynı yüksekliğe sahip olmasını istediğinizi varsayalım.

' Display: flex ' öğesinin yanı sıra ' align-items: stretch '

O zaman çocuğa divlere % 100 ' min-yüksekliği ' verin

Aşağıdaki koda bakın

.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>
Snippet'i genişlet

— RealMJDev
kaynak
2

Bir divs'nin bir usta olması ve her iki divs için yüksekliği dikte etmesinin sakıncası yoksa:

Vaktini boşa harcamak

Ne olursa olsun, divsağdaki divsoldaki yüksekliğe uyacak şekilde genişler veya ezilir ve taşar .

Her iki divs de bir kabın hemen çocukları olmalı ve bunların genişliklerini belirtmelidir.

İlgili CSS:

.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
kaynak
2

Bunu başarmak için sözde unsurları kullanmayı seviyorum. İçeriğin arka planı olarak kullanabilir ve alanı doldurmalarına izin verebilirsiniz.

Bu yaklaşımla sütunlar, kenarlıklar vb. Arasında kenar boşlukları ayarlayabilirsiniz.

.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>
Snippet'i genişlet

— Adrian Menendez
kaynak
1

Fiddle

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
kaynak
1

Yukarıda belirtilen yöntemlerin neredeyse tamamını denedim, ancak flexbox çözümü Safari ile düzgün çalışmaz ve ızgara düzeni yöntemleri eski IE sürümleriyle doğru çalışmaz.

Bu çözüm tüm ekranlara uyar ve tarayıcılar arası uyumludur:

.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;}
}

Yukarıdaki yöntem hücre yüksekliğine eşit olacaktır ve mobil veya tablet gibi daha küçük ekranlar için @mediayukarıda belirtilen yöntemi kullanabiliriz .

— Jodyshop
kaynak
0

bunu kolayca elde etmek için jQuery kullanabilirsiniz.

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>

JQuery eklemeniz gerekecek

— pixeltocode
kaynak
1
Her iki bu işe yaramaz <div>dinamik içeriğe sahip. Söylememin nedeni <div class="right">, diğer sorunun daha fazla içeriğe sahip olup olmadığıdır .
— Surya
0

Biliyorum uzun zaman oldu ama yine de çözümümü paylaşıyorum. Bu bir jQuery hilesi.

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

--- JQUERY

<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
kaynak
-1

Bu, aynı satırdaki tüm öğeler için eşit yüksekliği ayarlayan bir jQuery eklentisidir (öğenin ofset.top'unu kontrol ederek). Dolayısıyla, jQuery diziniz birden fazla satırdan (farklı offset.top) öğeler içeriyorsa, her satır, o satırda maksimum yüksekliğe sahip öğeye bağlı olarak ayrı bir yüksekliğe sahip olacaktır.

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ć
kaynak
-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
kaynak
1
Lütfen cevabınıza herhangi bir yorum sağlayın.
— sgnsajgon
-2

Ben jquery jquery günümüzde her web uygulamasının bir parçası olduğu gibi bu küçük işlevi yarattı aynı sorunu yaşıyordu.

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'
            });
        });
    }
}

Bu işlevi sayfa hazır olayında çağırabilirsiniz

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

Umarım bu senin için işe yarar.

— Yüksek Lisans Programcısı
kaynak
-3

Son zamanlarda bununla karşılaştım ve çözümleri gerçekten sevmedim, bu yüzden denemeyi denedim.

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

— tushar747
kaynak
-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>

Burada yaptığım, yüksekliği min yüksekliğe değiştirmek ve sabit bir değer vermek. bunlardan biri yeniden boyutlandırılıyorsa diğeri aynı yükseklikte kalacaktır. İstediğin bu olduğundan emin değilim

— Wai Wong
kaynak
OP, div'lerin her zaman aynı yüksekliğe sahip olmasını istedi.
— Simon Forsberg
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.