Ich habe drei div-Tags, eine Hülle und zwei nebeneinander innerhalb der Hülle:CSS Dynamische Heights
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
ich die Bedingung erstellen möchten, wo die <div id="left"> Tag variabler Höhe ist, die Hülle Stretching.
Als Ergebnis wird die <div id="right"> erweitern, auf welche Höhe der Wrapper geworden ist.
Welche CSS wird dies erreichen? Vielen Dank!
Wenn Sie mit Jquery gehen gehen, dann könnte man dies tun.
$(document).ready(function(){
var leftHt = $('#left').height();
$('#right').css("height",leftHt);
});
Es ist nicht CSS, aber es ist ziemlich einfach und sollte funktionieren. CSS wäre einfach nicht in der Lage, dies zu tun, zumindest meines Wissens nach.
Wenn Sie die Jquery-API noch nicht haben, gleich hinter dem Javascript.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="javascript" language"javascript"></script>
Arbeitsbeispiel hier:
Es gibt nicht wirklich einen guten Weg für #right, was auch immer # links 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 diese Art hat:
#left, #right {
width: 50%; /* Adjust as needed */
#right {
float: right;
}
Auf diese Weise #right nicht die Seitenlänge beeinflusst aber #left immer. Allerdings wird #right immer noch nicht auf die Länge von #links ausgedehnt. Ich weiß nicht, welchen Grund du dafür haben musst, um nach links zu strecken, aber ich nehme an, es ist etwas kosmetisches. Ich würde entweder versuchen, es von #left oder von #wrapper anzuwenden, wenn Sie möchten, dass es den ganzen Weg nach unten wiederholt.
Zum Beispiel, wenn Sie die #left weiß und rot #right wollen:
#left {
background: #fff;
}
#wrapper {
background: #f00;
}
Der falsche Spaltenansatz ist beschrieben in: http://www.alistapart.com/articles/fauxcolumns/ – outis
Die beste praktische Lösung ist eine Tabelle - siehe [diese Frage SO] (Make Two Floated CSS Elements the Same Height).
Natürlich können Sie Ihre eigenen Gründe für nicht mit Tabellen ...
Tabellen sind für tabellarische Daten! Wir sind in der Ära der Divs und Javascript. Kann nicht immer auf Tabellen für Design verlassen. –
-1. Semantisches HTML übertrumpft präsentatives HTML. – outis
Sie haben Recht, beachten Sie alle wichtigen * immer * in Ihrer Aussage. Ich verwende nur Tabellen, wenn es praktisch ist, und es ist mir egal, in welcher Ära es jetzt ist. Ich bevorzuge eine einfache Lösung für eine komplexe Lösung, die derzeit in Mode ist. Beachten Sie auch, dass die Verwendung eines Skripts für das Layout genauso falsch ist wie die Verwendung von Tabellen für nicht tabellarische Daten. Man kann auch argumentieren, dass es unnatürlich ist, für nicht-tabellarische Daten auf gleicher Höhe zu bestehen. –
Wenn Sie versuchen, Hintergründe oder etwas zu tun, und damit die gleiche Höhe benötigen, würde ich Tabellen empfehlen. Es ist viel einfacher. Wenn Sie divs und floated divs verwenden müssen, dann präsentiert dieser Artikel die einzige Möglichkeit, die ich gesehen habe, die gut funktioniert. Es ist für drei Spalten, aber man kann es für zwei ändern:
http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
Vielleicht auf der Party Ich bin spät dran, aber es ist wirklich einfach zu tun, was Sie mit reinem CSS beschreiben. Der Trick besteht darin, #right absolut positioniert zu machen und ihm top und bottom von 0 zu geben. Dies wird es auf jede beliebige Höhe dehnen #left gibt #wrapper.Hier ist ein komplettes Arbeitsbeispiel - #left ist grün, #right ist blau, und #wrapper ist rot, aber nie gesehen, weil es vollständig von #left und #right abgedeckt ist. Versuchen Sie, die bottom: 0; Zeile zu entfernen, 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>
+1. Verdammt, das wollte ich sagen, sogar bis auf die Farben. Beachten Sie, dass die Einstellung von oben und unten in IE6 nicht funktioniert (Höhe: 100%). Der Hauptfehler dieses Ansatzes ist, dass #left größer als #right sein muss. – outis
Ich habe keine Probleme mit Ihrem Ansatz, aber wie outis sagt "Der Hauptfehler dieses Ansatzes ist, dass #links größer sein müssen als #right." Das kann in einigen Fällen unordentlich werden, wenn das rechte div länger als das linke div ist. Wie auch immer, ich glaube nicht, dass ich jemals meine Hauptspalte und die Seitenspalte (wenn es das Konzept hier ist) brauchen würde, um die gleichen Höhen zu haben. Ich denke, da stimmen wir alle überein. –
@Michael Stone - Hat Ihre JS-Lösung nicht das gleiche Problem? In beiden Fällen setzen wir die Höhe von "# right" effektiv auf "# left". Wenn "# right" größer ist, muss nur "overflow" gesetzt werden. –
Beachten Sie, dass Präsensnamen wie "links" und "rechts" die Dinge unordentlich machen können, wenn Sie die Präsentation ändern (was ist, wenn Sie später #right auf der linken Seite möchten?). Berücksichtigen Sie semantische Namen wie "main" und "sidebar" oder ähnliches, die weniger Wartung benötigen. – outis
^^ Definitiv muss ich da zustimmen, aber ich bin mir sicher, das war nur ein Beispiel. Ich hoffe. –