Wie halte ich zwei side-by-side-divs die gleiche Höhe?

Habe ich zwei divs nebeneinander. Ich möchte die Höhe von Ihnen werden die gleichen, und die gleichen bleiben, wenn einer von Ihnen ändert. Ich kann nicht herausfinden this one out wenn. Ideen?

Zu klären, meine verwirrende Frage, ich möchte beide Boxen immer die gleiche Größe, so dass, wenn einer wächst, denn der text ist in es, sollte der andere wachsen entsprechend die Höhe.

HTML:

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

Wie hast du Sie "side by side"? Mit float?
Wollen Sie, dass, wenn einer von Ihnen ist größer, als der andere bleiben wird, die gleiche Höhe?
Ein Beispiel, das nicht eine Lösung, sondern in einem bearbeitbaren Umgebung finden Sie hier: jsfiddle.net/PCJUQ
Javascript: stackoverflow.com/questions/3275850/...

InformationsquelleAutor NibblyPig | 2010-06-08

533

Flexbox

Mit flexbox ist es eine einzige Erklärung:

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

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
```
HTML:
```
<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>
```
Präfixe, die erforderlich sein können, für ältere Browser, siehe browser-Unterstützung.
- flexbox funktioniert wie ein Charme. Wenn Sie entwickeln ein responsive design, und Sie möchten, dass Ihre zweite div zu gehen, in kleineren Bildschirmen, die Sie benötigen, um .Zeile display: block; in Ihrem media query.
- Ich glaube, in diesem Fall sollten Sie flex-direction: column: jsfiddle.net/sdsgW/1
- Dies funktioniert Super. Nur eine kleine Erinnerung an etwas, .Zeile muss geschwommen werden sowie für diese zu arbeiten.
- es ist nicht erforderlich, für beide Lösungen. Siehe demos.
- Es wird angezeigt, wenn Sie sich bereits festgelegt haben, die Breite, die Sie nicht verwenden flex:1 als es hat Nebenwirkungen. Aber das ist immer noch der beste moderne Lösung
- ohne flex: 1 wird das layout versuchen zu Spalten ausgleichen", alt. Sie können Breite pro Spalte: jsfiddle.net/sdsgW/64
- dies funktioniert nur im Falle der direkten Kinder, die ich denke
- dies war nicht für mich arbeiten, bis ich Hinzugefügt height:100%; für die Kinder Spalten
- könnte Sie erstellen Sie eine Geige mit Ihrem code?
- Ist es möglich, einen bestimmten untergeordneten div-bestimmen Sie die Höhe der anderen? So dass, wenn die Inhalte von anderen untergeordneten div-Element ändern, kann es nicht ändern, die Höhe, die bestimmte div
- Irgendwelche Tipps für IE11 (Arbeit-Einschränkung), ging ich hier (caniuse.com/#feat=flexbox) und dann hier (developer.mozilla.org/en-US/docs/Web/CSS/flex-basis) - ich bin mir nicht sicher, was für Eigenschaften anwenden, und ob Sie diese in die Spalte und/oder Zeile? Derzeit, ich habe nur display:flex auf die Reihe. Danke.
- Also, wenn es so einfach wie das hinzufügen von 'display: flex;" auf das mit div und tun, die nicht funktionieren, was sind die möglichen Ursachen, die verhindern, dass es von der Anzeige der enthaltenen side-by-side-divs mit gleicher Höhe?
- könnte Sie erstellen Sie ein Beispiel auf jsfiddle?
- Ich könnte, aber das Problem Auftritt (für mich) in einem großen e-learning 'engine' verwendet AngularJS und hat mehrere css-Dateien. Das ist, warum ich gefragt wurde, ob es ein einfach wie das hinzufügen von 'display: flex;' auf den container, was sind die Eigenschaften, die verhindern würden, dass diese wie beabsichtigt funktioniert? Aber ich kann sehen, ohne die vollständige "engine-sized' - Beispiel, es ist schwer, eine Lösung vorschlagen. Ich denke, es ist unmöglich zu lösen.
- dies hässlich aussieht, weil die child-divs nicht mit float: left und right, bzw.. es funktioniert nur, wenn Sie füllen die gesamte Breite des übergeordneten Elements
InformationsquelleAutor Pavlo
142

Dies ist ein häufiges problem, die viele erlebt haben, aber glücklicherweise haben einige kluge Köpfe, wie Ed Eliot ' s auf seinem blog gebucht haben, deren Lösungen online.

Im Grunde, was Sie tun, machen beide divs/Spalten sehr hoch durch hinzufügen einer padding-bottom: 100% und dann "trick-the-browser" zu denken, sind Sie gar nicht groß mit margin-bottom: -100%. Es ist besser erklärt von Ed Eliot in seinem blog, die auch enthält viele Beispiele.

CSS:
```
.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}
```
HTML:
```
<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>
```
- Erklärung auf Einer Wahren Layout wurde ein wenig schlechter, aber nach der überprüfung der erste link, den ich umgesetzt es in Ordnung aus einem der Beispiele, die er verwendet. Aber es ist wirklich schlimm, weil Sie haben, um ein Bild zu verwenden, um repräsentieren den unteren Rand der Spalten, und es ist zweifelhaft für cross-browser-Unterstützung. Aber es funktioniert und es sich nicht auf javascript, also werde ich markieren Sie es als richtig. Danke!
- Dies scheint nicht zu funktionieren in alten IE-Browsern (ja, leider ich habe immer noch die Unterstützung von IE6). Jeder Weg, um diese kompatibel?
- Checkout Ed Eliot ' s blog: ejeliot.com/blog/61 sollte Es funktionieren im IE6. Vielleicht wird das problem verursacht, an anderer Stelle?
- Diese wird unterbrochen, wenn das Fenster zu schmal ist, und die divs sind platziert unter einander.
- Der container sollte eine overflow: hidden; Eigenschaft.
- Wie definieren Sie den Textabstand, die Sie wirklich wollen, in der Tabelle Zelle, zB padding: 7px 10px, wenn die padding-bottom - Eigenschaft auf 100% eingestellt ist? (PS overflow:hidden war auch für mich auf die row)
- fügen Sie einfach ein weiteres inneres div-Element und geben Sie Zelle Polsterung vorhanden
- es funktioniert wie Charme. Danke, ich war dieses problem von einigen Tagen und es löste Dinge in Sekunden. Danke Ed, Eliot für die Lösung und vielen Dank an die person, die gebucht und teilte diese Antwort hier.
InformationsquelleAutor
53

Dies ist ein Bereich, wo die CSS hat eigentlich nie Lösungen — Sie sind unten, um mit <table> - tags (oder faken Sie mit dem CSS - display:table* Werte), denn das ist der einzige Ort, wo eine "halten Sie eine Reihe von Elementen der gleichen Höhe" implementiert.
```
<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>
```
Dies funktioniert in allen Versionen von Firefox, Chrome und Safari, Opera ab mindestens version 8 und im IE ab version 8.
- Diese Lösung ist nicht verfügbar für diejenigen, die brauchen, um Unterstützung für IE6/IE7, aber ich glaube, es ist die sauberste.
- diese Antwort ist PERFEKT! nur eine kleine Erinnerung: es kann passieren, dass einige Kunden erfordert "Tisch" anstelle von "table-row"
- aw, vielen Dank. Wissen Sie, welche Kunden benötigen table statt table-row?
- Huch, kann ich nicht sagen, ich habe es mal getestet, da 🙂 Gut zu wissen, obwohl, cheers. (Aufgrund Ihrer PDF-Fokus-ich Wette, es unterstützt einige der print-bezogenen features von CSS 2.1, die nicht umgesetzt sehr gut in Browsern.)
- Mit dieser Lösung - vergessen Sie Prozentsatz width für deine divs, es sei denn, Sie fügen display: table auf das übergeordnete element, die Durcheinander zu bringen.
- Ich bevorzuge diese Art und Weise. Ich weiß sind das display:table-Eltern, die fehlt. Bei der Verwendung von Media Queries können Sie ändern Sie die td ' s zu Anzeige-block, Ihr Verhalten zu ändern, wenn Sie nicht brauchen, zwei Spalten.
InformationsquelleAutor
38

Mit Javascript

mithilfe von jQuery können Sie es tun, in eine super einfache ein-line-Skript.
```
//HTML
<div id="columnOne">
</div>

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

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

Dies ist ein wenig interessanter. Die Technik nennt sich Faux Columns. Mehr oder weniger Sie nicht tatsächlich legen die tatsächlichen Höhe identisch sein, aber Sie rig einige grafische Elemente, damit Sie Aussehen der gleichen Höhe.
- Ich denke mit JavaScript ist eine sehr gute Methode. Das problem ist, es auseinander fällt, wenn deaktiviert. Ich denke, ich werde das auf jeden Fall und bauen die beste Kontingenz kann ich ;--) vielen Dank!
- Dies impliziert, dass columnOne DIE Höhe ist immer größer als columnTwo.
- Sie sollten vergleichen Sie die Höhe der Spalten vor der Anwendung die Höhe für Sie. Ich denke js wird die beste Methode für dieses problem, fast alle Browser js aktiviert ist, wenn nicht, Sie sollten aus Ihrer website und vielen anderen websites.
- Das wird auch nur funktionieren, wenn die Seite zuerst geladen wird. Wenn das Fenster dann verkleinert, wodurch die divs zu skalieren, dann werden Sie nicht synchronisiert
InformationsquelleAutor Derek Adair

Ich bin überrascht, dass niemand erwähnt hat das (sehr alt, aber zuverlässig) Absolute Spalten-Technik:
http://24ways.org/2008/absolute-columns/

Meiner Meinung nach, ist es weit überlegen, sowohl Faux Spalten und Eine Echte Layout-Technik.

Die Allgemeine Idee ist, dass ein element mit position: absolute; wird position gegen den nächsten übergeordneten element, das position: relative;. Sie Strecke dann eine Spalte zu füllen, die 100% der Höhe der Zuweisung sowohl ein top: 0px; und bottom: 0px; (oder was auch immer Pixel/Prozentsätze, die Sie tatsächlich benötigen.) Hier ist ein Beispiel:

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

Wenn die Rechte Spalte hat mehr Linien als auf der linken, ist der content overflow.
Sie können schalten Sie die linken und die rechten.

InformationsquelleAutor geofflee

Können Sie Jquery verwenden die Gleichen Höhen-Plugin zu erreichen, das Plugin macht alle div-der genau die gleiche Höhe wie die anderen. Wenn einer von Ihnen wächst und die anderen wachsen auch.

Hier ein Beispiel der Umsetzung

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.

Hier ist der link

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

InformationsquelleAutor Starx

8

Könnten Sie Faux Columns.

Im Grunde ist es verwendet ein background-image in einer mit DIV zu simulieren, die zwei gleiche-Höhe-DIVs. Mit dieser Technik, die auch ermöglicht Ihnen das hinzufügen von Schatten, abgerundete Ecken, benutzerdefinierten Rahmen oder andere funky Muster, um Ihre Container.

Funktioniert nur mit fester Breite Boxen obwohl.

Gut erprobt und funktioniert in jedem browser.

InformationsquelleAutor Arve Systad
6

Gerade entdeckt diesen thread bei der Suche für diese Antwort. Ich habe gerade eine kleine jQuery-Funktion, hoffe das hilft, funktioniert wie ein Charme:

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>
```
- Ich verwendet, outerHeight, um die padding und borders. Dies ist die sauberste Lösung, denke ich.
- Perfekte Lösung, die ich suchte. Andere Lösungen sind gut für den Fall, dass eine Zeile hat ein paar Spalten, aber dieser Ansatz ist besser für komplexe html-Inhalte. Kleine Zugabe: Wenn das Dokument die Größe im responsive Seite, Inhalt Höhe ändert sich nicht, weil der Feste. Also, habe ich noch $('.inner').css({ height: "initial" }); vor 'jede Funktion' Höhe festlegen, standardmäßig.
InformationsquelleAutor Mike Wells
4

Diese Frage wurde 6 Jahre her, aber es ist immer noch würdig ist, geben Sie eine einfache Antwort mit flexbox layout heute.

Fügen Sie einfach die folgenden CSS-der Vater <div> ist, wird es funktionieren.
```
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
```
Den ersten beiden Zeilen erklären, es wird so dargestellt, wie flexbox. Und flex-direction: row sagt Browser, Ihre Kinder werden in den Spalten angezeigt werden. Und align-items: stretch wird die Anforderung erfüllen, dass alle Kinder Elemente Strecken, um die gleiche Höhe hat es einer von Ihnen zu werden, höher.
- Die akzeptierte Antwort verwendet flexbox schon.
- Aber gefragt hat, bearbeitet seine Frage und fügte hinzu 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. was nicht erwähnt wird in der akzeptierten Antwort...ich habe gerade einen Abschluss hier. Vielleicht sollte ich haben gesagt, es auf die akzeptierte Antwort?
- es ist nicht explizit erwähnt, denn es ist bereits abgedeckt durch die einfache CSS-Deklaration bereits. Öffnen Sie die Antwort-Snippet in Vollbild-Modus und ändern Sie die Größe Ihrer browser-Fenster, um zu sehen; Sie bleiben die gleiche Größe wie jedes andere.
- Auch wenn die akzeptierte Antwort flexbox verwendet, diese hat einen anderen Ansatz. align-items: gestreckt ist, was mich auf dem Weg zur Lösung meines Problems in einer ganz besonderen situation.
- Nicht align-items: stretch; flex Standard?
InformationsquelleAutor Hegwin

Wenn dir nichts ausmacht eine der divs, ein Meister und diktieren die Höhe für beide divs gibt es diese:

Geige

Egal, was der div auf der rechten Seite dehnen oder Stauchen&overflow entsprechend der Höhe der div auf der linken Seite.

Beide divs sein muss, unmittelbar untergeordneten Elemente eines Containers, und geben Sie die Spaltenbreite innerhalb es.

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

InformationsquelleAutor Hashbrown

Ich mag die pseudo-Elemente, dies zu erreichen. Sie können es verwenden, wie hintergrund, den Inhalt und lassen Sie den Raum füllen.

Mit dieser Vorgehensweise können Sie die Ränder zwischen den Spalten, Ränder, etc.

CSS:

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

HTML:

<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>

InformationsquelleAutor Adrian Menendez

Die CSS-grid-Weg

Die moderne Art, dies zu tun (was auch verhindert, dass zu erklären <div class="row"></div>-wrapper für alle zwei Elemente) wäre der Einsatz eines CSS-raster. Dies gibt Ihnen auch eine einfache Kontrolle über die Lücken zwischen Ihrem Element, Spalten/Zeilen.

CSS:

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

HTML:

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

InformationsquelleAutor connexo

1

Ich habe versucht, fast alle der genannten Methoden oben, aber die flexbox-Lösung funktioniert nicht mit Safari, und der grid-layout-Methoden funktioniert nicht ordnungsgemäß mit älteren Versionen des IE.

Diese Lösung passt auf alle Bildschirme und ist cross-browser kompatibel:
```
.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;}
}
```
Den oben genannten-Methode wird gleich von Zellen Höhe und für die kleineren Bildschirme wie Handy oder tablet, können wir die @media oben genannten Verfahren.

InformationsquelleAutor Jodyshop

können Sie jQuery verwenden um dies zu erreichen leicht.

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>

Muss jQuery

Das wird nicht funktionieren, wenn sowohl die <div> haben dynamische Inhalte. Der Grund, warum ich sage, ist, wenn <div class="right"> haben mehr Inhalt, dass das andere problem entsteht.

InformationsquelleAutor pixeltocode

Ich weiß, es ist schon eine lange Zeit, aber ich Teile meine Lösung trotzdem.
Dies ist ein jQuery-trick.

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

InformationsquelleAutor Roy Vincent

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

InformationsquelleAutor drjorgepolanco

-1

Dies ist ein jQuery-plugin, das setzt die Höhe für alle Elemente in der gleichen Zeile(durch aktivieren des Elements kompensiert.top). Also, wenn Ihr jQuery-array enthält Elemente aus mehr als einer Zeile(verschiedene offset.oben), jede Zeile wird eine getrennt, - Höhe, basierend auf dem element mit der maximalen Höhe in dieser Zeile.

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] );

}

};

InformationsquelleAutor Déján Kőŕdić

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

    });

Bitte liefern Sie zu jedem Kommentar zu Ihrer Antwort.

InformationsquelleAutor tcao

-2

Ich hatte das gleiche problem, so habe ich diese kleine Funktion mit jquery so jquery ist Teil jeder web-Anwendung ist heute.

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

Rufen Sie diese Funktion auf Seite bereit Ereignis

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

Ich hoffe, das funktioniert für Sie.

InformationsquelleAutor Master Programmer

-3

Kurzem stieß ich auf dieses und nicht wirklich wie die Lösungen, also versuchte ich, zu Experimentieren.

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

InformationsquelleAutor tushar747

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

Was ich hier getan habe, ist zu ändern Sie die Höhe auf min-height und gab ihm einen festen Wert. wenn einer von Ihnen ist verkleinert, die anderen bleiben gleich hoch. nicht sicher, ob dies ist, was Sie wollen

Der OP wollte die divs immer die gleiche Höhe haben.

InformationsquelleAutor Wai Wong

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Flexbox

Mit Javascript

Mit CSS

Die CSS-grid-Weg