Wie halte ich zwei Side-by-Side-Divs in der gleichen Höhe?

StackOverflow https://stackoverflow.com/questions/2997767

Frage

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

Um meine verwirrende Frage zu verdeutlichen, möchte ich, dass beide Boxen immer gleich groß sind. Wenn einer wächst, weil ein Text in ihn eingelegt wird, sollte der 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>

War es hilfreich?

Lösung

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 können Präfixe erforderlich sein, siehe Browserunterstützung.

Andere Tipps

Dies ist ein häufiges Problem, dem viele begegnet sind, aber zum Glück mögen einige kluge Köpfe Ed Eliot ist auf seinem Blog habe ihre Lösungen online gepostet.

Grundsätzlich machen Sie beide Divs/Spalten sehr groß durch Hinzufügen a padding-bottom: 100% Und dann "Trick the Browser" zu denken, sie seien nicht so groß, wenn sie nicht so groß sind margin-bottom: -100%. Es wird von Ed Eliot in seinem Blog besser erklärt, das 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 hatte - Sie sind doppelt damit, zu verwenden <table> Tags (oder fälschen sie mit dem CSS display:table* Werte), da dies der einzige Ort ist, an dem ein „Halt von Elementen die gleiche Höhe behalten“ 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 aus mindestens Version 8 und in IE aus Version 8.

Mit jQuery

Mit JQuery können Sie dies in einem super einfachen Einzeilen-Skript tun.

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

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

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

Mit CSS

Das ist etwas interessanter. Die Technik heißt Faux -Spalten. Mehr oder weniger setzen Sie das nicht wirklich fest tatsächlich Höhe, um gleich zu sein, aber Sie rüsten einige grafische Elemente auf sehen die gleiche Höhe.

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

Meiner Meinung nach ist es sowohl Faux -Spalten als auch der Technik eines echten Layouts weit überlegen.

Die allgemeine Idee ist, dass ein Element mit position: absolute; wird gegen das nächste übergeordnete Element positionieren, das hat position: relative;. Sie strecken dann eine Spalte, um 100% Höhe zu füllen, indem Sie beide a zuweisen top: 0px; und bottom: 0px; (oder welche Pixel/Prozentsätze 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>

Sie können JQuery's gleiches Höhen -Plugin verwenden, um zu erreichen. Dieses Plugins macht alle div der genauen Höhe wie andere. Wenn einer von ihnen wächst und anderer wächst ebenfalls.

Hier eine Stichprobe der 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/equalheghts-jquery-plugin/

Du könntest benutzen Faux -Spalten.

Grundsätzlich verwendet es ein Hintergrundbild in einem enthaltenden DIV, um die beiden T-Height-Tivs zu simulieren. Mit dieser Technik können Sie auch Schatten, abgerundete Ecken, benutzerdefinierte Grenzen oder andere funky Muster zu Ihren Behältern hinzufügen.

Funktioniert jedoch nur mit Kisten mit fester Breite.

Gut getestet und in jedem Browser richtig arbeiten.

Ich habe diesen Thread gerade entdeckt, während ich nach dieser Antwort suchte. Ich habe gerade eine kleine JQuery -Funktion gemacht, hoffe, dies 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>

Diese Frage wurde vor 6 Jahren gestellt, aber es ist immer noch wert, eine einfache Antwort mit zu geben Flexbox Layout heutzutage.

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

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

Die ersten beiden Zeilen erklären, dass es als Flexbox angezeigt wird. Und flex-direction: row teilt Browsern mit, dass seine Kinder in Spalten angezeigt werden. Und align-items: stretch wird der Anforderung erfüllen, dass alle Kinderelemente auf die gleiche Höhe erstrecken, die einer von ihnen höher wird.

Wenn es Ihnen nichts ausmacht, einer der divS ein Meister sein und die Höhe für beide diktieren divs Es gibt Folgendes:

Geige

Egal was, die div rechts erweitert sich oder sait div auf der Linken.

Beide divS müssen unmittelbare Kinder eines Behälters sein und müssen ihre Breiten darin angeben.

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

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

Mit diesem Ansatz können Sie Ränder zwischen Spalten, Rändern 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>

Der CSS -Gitterweg

Die moderne Art, dies zu tun (was auch vermeidet, a zu deklarieren <div class="row"></div>-Wenden Sie sich um alle zwei Gegenstände) würden ein CSS -Netz verwenden. Auf diese Weise können Sie auch die Lücken zwischen Ihren Artikelzeilen/Spalten kontrollieren.

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

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

Diese Lösung passt zu allen Bildschirmen und ist kreuzbrowser 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 Höhe der Zellen, und für kleinere Bildschirme wie Mobile oder Tablet können wir die verwenden @media Methode oben erwähnt.

Sie können JQuery verwenden, um dies leicht 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 einschließen JQuery

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>

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

Dies ist ein JQuery -Plugin, das die gleiche Höhe für alle Elemente in derselben Zeile festlegt (indem der Offset des Elements überprüft wird. Wenn also Ihr JQuery -Array Elemente aus mehr als einer Zeile (unterschiedlicher Versatz.Top) enthält, hat jede Zeile eine getrennte Höhe, basierend auf dem Element mit maximaler 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 auf der Seitenereignis aufrufen

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

Ich hoffe das funktioniert für Sie.

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 Minus zu ändern und ihm einen festen Wert zu geben. Wenn einer von ihnen die Größe der Änderung hat, bleibt der andere die gleiche Höhe. Ich bin mir nicht sicher, ob Sie das wollen, was Sie wollen

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top