•  11-09-2019
  •  | 
  •  

Frage

Ich habe drei Div -Tags, einen Wrapper und zwei nebeneinander im Wrapper:

<div id="wrapper">
   <div id="left"></div>
   <div id="right"></div>
</div>

Ich möchte den Zustand erstellen, in dem die <div id="left"> Tag ist eine variable Höhe und streckt den Wrapper.

Infolgedessen die <div id="right"> wird sich auf die Höhe erweitern, die der Wrapper geworden ist.

Welches CSS wird das erreichen? Vielen Dank!

War es hilfreich?

Lösung

Wenn Sie mit JQuery gehen, können Sie dies tun.

$(document).ready(function(){
   var leftHt = $('#left').height();
   $('#right').css("height",leftHt);

});

Es ist kein CSS, aber es ist ziemlich einfach und sollte funktionieren. CSS würde dies zumindest meines Wissens einfach nicht leicht tun.

Wenn Sie die JQuery -API noch nicht haben, danach über dem JavaScript. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="javascript" language"javascript"></script>

Arbeitsbeispiel hier:

http://michaelpstone.net/development/dynamic-height.html

Andere Tipps

Vielleicht bin ich zu spät zur Party, aber es ist wirklich einfach, das zu tun, was Sie mit reinem CSS beschreiben. Der Trick ist zu machen #right absolut positioniert und geben es a top und bottom von 0. Dies wird es auf die Höhe dehnen #left gibt #wrapper. Hier ist ein vollständiges Arbeitsbeispiel - #left ist grün, #right ist blau und #wrapper ist rot, aber nie gesehen, weil es vollständig von bedeckt ist #left und #right. Versuchen Sie, das zu entfernen bottom: 0; Zeile, um zu sehen, wie es ohne es aussieht.

<html lang="en">
  <head>
    <title></title>

    <style type="text/css">
      #wrapper {
        background: #fdd;
        position: relative;
        width: 300px; /* left width + right width */
      }

      #left {
        background: #dfd;
        width: 200px;
      }

      #right {
        background: #ddf;
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
        <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
      </div>
      <div id="right">
        <p>turpis metus. Sed id lorem eu urna suscipit porttitor. Nullam. </p>
      </div>
    </div>
  </body>
</html>

Es gibt nicht wirklich eine gute Möglichkeit für #Right, zu dem zu passen, was #Left geworden ist. Der beste Weg, dies zu tun, ist wahrscheinlich:

<div id="wrapper">
    <div id="right"></div> <!-- note that right comes before left -->
    <div id="left"></div>
</div>

Dann haben Sie diesen Stil:

#left, #right {
    width: 50%; /* Adjust as needed */
#right {
    float: right;
}

Auf diese Weise wird #Right die Seitenlänge nicht beeinflussen, aber #Left wird es immer tun. #Right erstreckt sich jedoch immer noch nicht auf die Länge von #Left. Ich weiß nicht, welchen Grund Sie für #Left haben müssen, aber ich gehe davon aus, dass es etwas Kosmetisches ist. Ich würde entweder versuchen, es stattdessen von #Left oder von #Wrapper anzuwenden, wenn Sie möchten, dass es sich bisher nach unten wiederholt.

Zum Beispiel, wenn Sie das #LEFT White und #Right Red möchten:

#left {
    background: #fff;
}
#wrapper {
    background: #f00;
}

Die beste praktische Lösung ist eine Tabelle - siehe [diese Frage] (Machen Sie zwei schwebende CSS -Elemente zur gleichen Höhe).

Natürlich können Sie Ihre eigenen Gründe haben, keine Tabellen zu verwenden ...

Wenn Sie versuchen, Hintergründe oder so zu machen und somit die gleiche Höhe zu benötigen, würde ich Tische empfehlen. Es ist viel einfacher. Wenn Sie Divs und schwebende Divs verwenden müssen, insbesondere in diesem Artikel entspricht der einzige Weg, den ich gesehen habe, der gut funktioniert. Es ist für drei Spalten, aber Sie können es für zwei ändern:

http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

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