Wie halte ich zwei nebeneinander liegende Divs auf gleicher Höhe?

440

Ich habe zwei Divs nebeneinander. Ich möchte, dass ihre Höhe gleich ist und dass sie gleich bleibt, wenn einer von ihnen die Größe ändert. Ich kann das aber nicht herausfinden. Ideen?

Um meine verwirrende Frage zu klären, möchte ich, dass beide Felder immer die gleiche Größe haben. Wenn also eines wächst, weil Text darin platziert ist, sollte das andere wachsen, um der Höhe zu entsprechen.

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

NibblyPig
quelle
Möchten Sie, dass, wenn einer von ihnen größer wird, der andere gleich groß bleibt?
Wai Wong
Ein Beispiel, das keine Lösung ist, sich aber in einer bearbeitbaren Umgebung befindet, finden Sie hier: jsfiddle.net/PCJUQ
MvanGeest
Verwenden Sie Javascript: stackoverflow.com/questions/3275850/…
C. Hare

Antworten:

591

Flexbox

Mit Flexbox ist es eine einzige Deklaration:

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

Für ältere Browser sind möglicherweise Präfixe erforderlich (siehe Browserunterstützung) .

Pavlo
quelle
17
Flexbox wirkte wie ein Zauber. Wenn Sie ein responsives Design entwickeln und möchten, dass Ihr zweites Div in kleineren Bildschirmen angezeigt wird, müssen Sie .row so einstellen, dass Folgendes angezeigt wird: block; in Ihrer Medienabfrage.
Nick Zulu
7
@ NickZulu Ich glaube in diesem Fall sollten Sie setzen flex-direction: column: jsfiddle.net/sdsgW/1
Pavlo
1
@ Eckstein ist für beide Lösungen nicht erforderlich. Siehe Demos.
Pavlo
3
Das hat bei mir nicht funktioniert, bis ich die Größe hinzugefügt habe: 100%; zu den
Kindersäulen
1
Ist es möglich, dass ein bestimmtes Kind die Größe des anderen bestimmt? Wenn sich also der Inhalt eines anderen Kinder-Div ändert, kann sich die Höhe dieses bestimmten Div nicht ändern
Narek Malkhasyan,
149

Dies ist ein häufiges Problem, auf das viele gestoßen sind, aber zum Glück haben einige kluge Köpfe wie Ed Eliot in seinem Blog ihre Lösungen online gestellt.

Grundsätzlich machen Sie beide Divs / Spalten sehr groß, indem Sie ein hinzufügen padding-bottom: 100%und dann "den Browser austricksen", um zu glauben, dass sie nicht so groß sind margin-bottom: -100%. Es wird besser von Ed Eliot in seinem Blog erklärt, der auch viele Beispiele enthält.

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

Lambda
quelle
1
Die Erklärung zu One True Layout war etwas schlecht, aber nachdem ich den ersten Link überprüft hatte, implementierte ich ihn anhand eines der von ihm verwendeten Beispiele. Es ist jedoch sehr schlecht, da Sie ein Bild verwenden müssen, um den unteren Rand der Spalten darzustellen, und es für die browserübergreifende Unterstützung zweifelhaft ist. Es funktioniert jedoch und es basiert nicht auf Javascript, daher werde ich es als korrekt markieren. Vielen Dank!
NibblyPig
Dies scheint in alten IE-Browsern nicht zu funktionieren (ja, leider muss ich IE6 noch unterstützen). Wie kann man das kompatibel machen?
Strongriley
1
@strongriley Checkout Ed Eliots Blog: ejeliot.com/blog/61 Es sollte in IE6 funktionieren. Vielleicht liegt das Problem woanders?
mqchen
1
Dies bricht ab, wenn das Fenster zu eng ist und die Divs untereinander platziert sind.
WhyNotHugo
1
Wie definieren Sie die Zellenauffüllung, die tatsächlich in der Tabellenzelle vorhanden sein soll, z. B. padding: 7px 10pxwenn die padding-bottomEigenschaft auf 100% festgelegt ist? (PS overflow:hiddenwurde auch für mich auf dem benötigt row)
user1063287
55

Dies ist ein Bereich, in dem CSS noch nie wirklich Lösungen gefunden hat - Sie müssen nur <table>Tags verwenden (oder sie mithilfe der CSS- display:table*Werte vortäuschen ), da dies der einzige Ort ist, an dem ein "Bündel von Elementen auf derselben Höhe halten" implementiert wurde.

<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 Version 8 und in IE ab Version 8.

Paul D. Waite
quelle
5
Diese Lösung ist nicht für diejenigen verfügbar, die IE6 / IE7 unterstützen müssen, aber ich glaube, sie ist die sauberste.
Twsaef
2
Diese Antwort ist perfekt! Nur eine kleine Erinnerung: Es kann vorkommen, dass ein Client "Tabelle" anstelle von "Tabellenzeile" benötigt
Tiborka
@ user2025810: aw, danke. Wissen Sie , welche Kunden verlangen tablestatt table-row?
Paul D. Waite
@ user2025810: Huch, ich kann nicht sagen, dass ich das jemals getestet habe :) Gut zu wissen, Prost. (Aufgrund seines PDF-Fokus wette ich, dass es einige der druckbezogenen Funktionen von CSS 2.1 unterstützt, die in Browsern nicht sehr gut implementiert sind.)
Paul D. Waite
7
Vergessen Sie bei dieser Lösung die Verwendung des Prozentsatzes widthfür Ihre Divs, es sei denn, Sie fügen display: tabledas übergeordnete Element hinzu, was die Dinge durcheinander bringt.
Alex G
42

Verwenden von jQuery

Mit jQuery können Sie dies in einem supereinfachen einzeiligen Skript tun.

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

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

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

Verwenden von CSS

Das ist etwas interessanter. Die Technik heißt Faux Columns . Mehr oder weniger stellen Sie die tatsächliche Höhe nicht gleich ein, sondern richten einige grafische Elemente so ein, dass sie gleich hoch aussehen .

Derek Adair
quelle
Ich denke, JavaScript ist eine sehr gute Methode. Das Problem ist - es fällt auseinander, wenn es deaktiviert ist. Ich denke, ich werde das trotzdem nutzen und die bestmögliche Kontingenz aufbauen; -) Danke!
Nicorellius
13
Dies bedeutet, dass die Höhe von columnOne immer größer als die von columnTwo ist.
Sébastien Richer
1
Sie sollten die Höhe der Spalten vergleichen, bevor Sie die Höhe für sie anwenden. Ich denke, js ist die beste Methode für dieses Problem. Fast alle Browser sind js-fähig. Wenn nicht, sollten sie Ihre Website und viele andere Websites verlassen.
SalmanShariati
6
Dies funktioniert auch nur, wenn die Seite zum ersten Mal geladen wird. Wenn die Größe des Fensters geändert wird und die Divs die Größe ändern, bleiben sie nicht synchron
ikariw
16

Ich bin überrascht, dass niemand die (sehr alte, aber zuverlässige) Absolute Columns-Technik erwähnt hat: http://24ways.org/2008/absolute-columns/

Meiner Meinung nach ist es sowohl der Faux Columns als auch der One True Layout-Technik weit überlegen.

Die allgemeine Idee ist, dass ein Element mit position: absolute;Willen gegen das nächste übergeordnete Element positioniert wird, das hat position: relative;. Anschließend dehnen Sie eine Spalte, um 100% Höhe zu füllen, indem Sie sowohl a top: 0px;als auch bottom: 0px;(oder die Pixel / Prozentsätze, die Sie tatsächlich benötigen) zuweisen . Hier 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>
Geofflee
quelle
1
Wenn die rechte Spalte mehr Zeilen als die linke enthält, läuft der Inhalt über.
David
11

Sie können das Equal Heights Plugin von Jquery verwenden, um dies zu erreichen. Dieses Plugin macht alle Divs exakt gleich hoch wie andere. Wenn einer von ihnen wächst und der andere auch wächst.

Hier ein Beispiel für die Implementierung

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/

Starx
quelle
8

Sie könnten Faux Columns verwenden .

Grundsätzlich wird ein Hintergrundbild in einem enthaltenden DIV verwendet, um die beiden gleich hohen DIVs zu simulieren. Mit dieser Technik können Sie Ihren Containern auch Schatten, abgerundete Ecken, benutzerdefinierte Ränder oder andere funky Muster hinzufügen.

Funktioniert jedoch nur mit Boxen mit fester Breite.

Gut getestet und funktioniert in jedem Browser richtig.

Arve Systad
quelle
7

Habe gerade diesen Thread entdeckt, als ich nach dieser Antwort gesucht habe. Ich habe gerade eine kleine jQuery-Funktion erstellt, hoffe, das hilft, funktioniert wie ein Zauber:

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
quelle
1
Ich habe OuterHeight verwendet, um Polster und Ränder einzuschließen. Dies ist die sauberste Lösung, die ich denke.
Sébastien Richer
Perfekte Lösung, die ich gesucht habe. Andere Lösungen eignen sich für den Fall, dass eine Zeile einige Spalten enthält. Dieser Ansatz eignet sich jedoch besser für komplexe HTML-Inhalte. Kleines Hinzufügen: Wenn die Größe des Dokuments auf einer reaktionsfähigen Seite geändert wird, ändert sich die Höhe des Inhalts aufgrund der festgelegten Größe nicht. Also habe ich $ ('. Inner') hinzugefügt. Css ({height: "initial"}); vor 'jeder Funktion', um die Höhe auf Standard zu setzen.
Bafsar
5

Der CSS-Rasterweg

Die moderne Art, dies zu tun (wodurch auch vermieden wird, dass <div class="row"></div>alle zwei Elemente ein Wrapper deklariert werden muss), wäre die Verwendung eines CSS-Rasters. Auf diese Weise können Sie auch die Lücken zwischen Ihren Artikelzeilen / -spalten einfach steuern.

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

connexo
quelle
4

Diese Frage wurde vor 6 Jahren gestellt, aber es lohnt sich immer noch, eine einfache Antwort mit dem Flexbox- Layout zu geben .

Fügen Sie dem Vater einfach das folgende CSS hinzu <div>, es wird funktionieren.

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

In den ersten beiden Zeilen wird angegeben, dass es als Flexbox angezeigt wird. Und flex-direction: rowteilt den Browsern mit, dass ihre untergeordneten Elemente in Spalten angezeigt werden. Und align-items: stretcherfüllt die Anforderung, dass sich alle untergeordneten Elemente auf die gleiche Höhe dehnen, wenn eines von ihnen höher wird.

Hegwin
quelle
1
@ TylerH Aber gefragt hat seine Frage bearbeitet und hinzugefügt, 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 in der akzeptierten Antwort nicht erwähnt wird ... Ich habe gerade eine Vervollständigung hier gemacht. Vielleicht hätte ich die akzeptierte Antwort kommentieren sollen?
Hegwin
1
Es wird nicht explizit erwähnt, da es bereits durch die einfache CSS-Deklaration abgedeckt ist. Öffnen Sie das Snippet der Antwort im Vollbildmodus und ändern Sie die Größe Ihres Browserfensters, um es anzuzeigen. Sie bleiben gleich groß.
TylerH
1
Selbst wenn die akzeptierte Antwort Flexbox verwendet, hat diese einen anderen Ansatz. Align-Items: Stretch hat mich auf den Weg gebracht, mein Problem in einer ganz bestimmten Situation zu lösen.
BenoitLussier
Ist align-items: stretch;Flex nicht die Standardeinstellung?
Madav
3

Die Verwendung von CSS Flexbox und Min-Height hat bei mir funktioniert

Geben Sie hier die Bildbeschreibung ein

Angenommen, Sie haben einen Container mit zwei Divs im Inneren und möchten, dass diese beiden Divs dieselbe Höhe haben.

Sie würden gesetzt ‚ display: flex ‘ auf dem Behälter sowie ‚ align-Artikel: Stretch

Dann geben Sie einfach das Kind divs eine ‚ min-height ‘ von 100%

Siehe den Code unten

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

RealMJDev
quelle
2

Wenn es Ihnen nichts ausmacht, dass einer der divs ein Meister ist und die Höhe für beide divs diktiert, gibt es Folgendes:

Geige

Egal was divpassiert , das rechte wird sich ausdehnen oder quetschen und überlaufen, um der Höhe des divlinken zu entsprechen.

Beide div s müssen unmittelbare untergeordnete Elemente eines Containers sein und ihre Breite darin angeben.

Relevantes 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
quelle
2

Ich benutze gerne Pseudoelemente, um dies zu erreichen. Sie können es als Hintergrund für den Inhalt verwenden und sie den Raum füllen lassen.

Mit diesem Ansatz können Sie Ränder zwischen Spalten, Rahmen usw. festlegen.

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

Adrian Menendez
quelle
1

Die Geige

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

Ich habe fast alle oben genannten Methoden ausprobiert, aber die Flexbox-Lösung funktioniert mit Safari nicht richtig, und die Rasterlayout-Methoden funktionieren mit älteren IE-Versionen nicht richtig.

Diese Lösung passt auf alle Bildschirme und ist browserübergreifend 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;}
}

Die obige Methode entspricht der Zellenhöhe, und für kleinere Bildschirme wie Mobilgeräte oder Tablets können wir die @mediaoben erwähnte Methode verwenden.

Jodyshop
quelle
0

Sie können jQuery verwenden, um dies einfach zu erreichen.

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>

Sie müssen jQuery einschließen

Pixelcode
quelle
1
Dies funktioniert nicht, wenn beide <div>über dynamischen Inhalt verfügen. Der Grund, den ich sage, ist, wenn Sie <div class="right">mehr Inhalt haben, dass das andere Problem auftritt.
Surya
0

Ich weiß, dass es lange her ist, 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>
Roy Vincent
quelle
-1

Dies ist ein jQuery-Plugin, das die gleiche Höhe für alle Elemente in derselben Zeile festlegt (indem das offset.top des Elements überprüft wird). Wenn Ihr jQuery-Array also Elemente aus mehr als einer Zeile enthält (unterschiedlicher offset.top), hat jede Zeile eine separate 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] );

}

};

Déján Kőŕdić
quelle
-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
quelle
1
Bitte geben Sie einen Kommentar zu Ihrer Antwort.
sgnsajgon
-2

Ich hatte das gleiche Problem, also habe ich diese kleine Funktion mit jquery erstellt, da jquery heutzutage Teil jeder Webanwendung ist.

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

Sie können diese Funktion bei einem seitenbereiten Ereignis aufrufen

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

Ich hoffe das funktioniert bei dir.

Master-Programmierer
quelle
-3

Ich bin kürzlich darauf gestoßen und mochte die Lösungen nicht wirklich, also habe ich versucht zu experimentieren.

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

tushar747
quelle
-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, die Höhe in Min-Höhe zu ändern und einen festen Wert zu geben. Wenn einer von ihnen die Größe ändert, bleibt der andere auf der gleichen Höhe. Ich bin mir nicht sicher, ob du das willst

Wai Wong
quelle
Das OP wollte, dass die Divs immer die gleiche Höhe haben.
Simon Forsberg