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>

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

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>

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.

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 .

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>

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/

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.

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>

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>

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.

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

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>

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

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>

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

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.

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

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>

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

}

};

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

    });

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.

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

<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