CSS Floated Div Höhe Problem, keine einfache Lösung?

Ich habe ein Problem mit CSS, das ich nicht lösen kann.CSS Floated Div Höhe Problem, keine einfache Lösung?

Nehmen wir an, dass die Höhe der rosa und grünen Box von ihrem Inhalt bestimmt wird. Die rosa Box könnte manchmal die kleinere sein.

Was ich versuche zu tun ist, haben die kleinere Box, die Höhe zu der äußeren mit div, so dass es die gleiche Höhe wie die rosa Box (oder umgekehrt) haben würde.

Wer hat irgendwelche Lösungen?

Min-Höhe auf den rosa und grünen Kästen wird nicht funktionieren, weil sie diese Höhe überschreiten können (auch keine IE6-Unterstützung).

100% Höhe auf den rosa und grünen Boxen wird nicht funktionieren, da das äußere div keine feste Höhe hat.

Ein Tisch würde funktionieren, aber komm schon, ein Tisch?

Ich könnte Hintergründe und Links-rechts-Grenzen auf den rosa und grünen Kästchen fälschen, indem ich sie in den Hintergrund des äußeren Teiles lege. Aber das scheint unordentlich zu sein.

Im Moment habe ich eine js-Lösung, aber es muss eine einfachere sein.

Prost.

Quelle

2010-02-10 Smickie

Nö, haben Sie die beliebtesten Techniken für diese (faux Spalten, Javascript) aufgeführt http://www.alistapart.com/articles/fauxcolumns/ Es gibt definitiv keine Möglichkeit, dies mit divs in CSS zu tun noch – davidosomething

Prost für deine Antworten. Ich gehe mit meiner eigenen js/jquery Lösung, mit CSS als Backup, aber nicht 100% des gewünschten Aussehens. Ich werde es aufschreiben, wenn es fertig ist und etwas benutzt wurde. – Smickie

Verwenden Sie the Faux Columns technique dafür. Grundsätzlich müssen Sie ein wiederholendes Hintergrundbild für das Elternelement verwenden, das beide Felder enthält.

Quelle

2010-02-10 13:43:26

+1 Für die Antwort. Faux columns ist eine gültige Lösung und wenn sie als 8bit PNG gespeichert wird, liegt die Datei normalerweise bei 1 oder 2K. –

... oder sogar weniger. In den meisten Fällen, in denen ich diese Technik verwendete, konnte ich Hintergrundbilder mit einer Höhe von 1 Pixel verwenden. Abhängig von der Situation könnte die Dateigröße nur einige hundert Bytes betragen. –

Neben Javascript/Jquery oder Tabellen, das einzige, was ich denken kann, ist eine display: table-cell basierte Lösung (Erklärung here) - aber das wird in IE entweder nicht funktioniert, und es ist zu verwenden nicht viel Unterschied sofort einen Tisch, oder?

Ich würde sagen, dass dies einer der seltenen Fälle ist, in denen es aufgrund der sucky CSS Spezifikationen und/oder Implementierungen keinen Weg um einen Tisch gibt.

Bearbeiten: Wie andere Beantworter darauf hingewiesen haben, gibt es CSS-Problemumgehungen ("Faux-Spalten"), die in den meisten Fällen funktionieren. Unter Verwendung von "CSS-Tabellen" (unter Verwendung von display: table Eigenschaften) halte ich keine gültigen Lösungen für vorhanden, da sie nicht von IE6 unterstützt werden, einem Browser, der immer noch einen beträchtlichen Marktanteil hat.

Quelle

2010-02-10 13:42:40

OHMYWORDTABLES :) Eigentlich denke ich immer noch Faux Columns ist die richtige Antwort. Tabellen * wirklich * sind kein Layout-Mechanismus. Mit Faux Columns können Sie das Hintergrundbild immer ausschalten und das Layout im CSS ändern. Bei Tabellen müssen Sie die Tabelle bearbeiten, um das Layout zu ändern. Nur meine zwei Cent. –

CSS-Tabellen ** sind ** ein Layoutmechanismus und benötigen keine HTML-Tabellenelemente. Es gibt keine Notwendigkeit mehr, den HTML-Code zu bearbeiten, wenn CSS-Tabellen für das Layout verwendet werden, wenn andere CSS-Layouts verwendet werden (d. H., Sie müssen wahrscheinlich etwas für eine signifikante Änderung optimieren). – Quentin

@Doug True, aber funktioniert nicht immer (wenn Sie die Spalten * physikalisch * müssen die gleiche Höhe haben, zum Beispiel wenn Sie etwas innerhalb der Spalte positionieren). Faux Säulen sind ein o.k. Lösung, wenn sie für Ihre Situation funktionieren (und ich bin vollkommen zufrieden, wenn sie die Lösungen für das OP-Problem sind), aber immer noch, das ist ein massiver Mangel an CSS, von dem ich finde, dass es nicht in irgendeiner Form angesprochen wird. –

Dies ist das gleiche wie die gleiche Höhe Spalten Problem, siehe blog post für eine Lösung.

Quelle

2010-02-10 13:44:34 Lazarus

Nun, den Artikel zu lesen, dass "keine Hacks" im Titel ist eher fragwürdig. –

was dazu:

.green { 
    display:block; 
    float: left; 
    background: green; 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 

.outer { 
    position: relative; 
    background: yellow; 
    overflow: auto; 
} 

.pink { 
    left: 250px; 
    background: red; 
    height: 100%; 
    width: 100px; 
    position: absolute; 
}

arbeiten sollte .. vielleicht geändert ich die Farben, ist die rosa Box die mit wachsenden ein! ;)

bearbeiten ah ok, ich habe das Floaten auf der zweiten Box verpasst. Wenn das ein Muss ist, wie oben erwähnt, ist Faux Columns eine gute Technik, denke ich.

Quelle

2010-02-10 13:49:57 xijo

Wie wäre es mit einem Kompromiss?

Wenn falsche Spalten Ihnen nicht helfen können, Sie nicht Tabellen verwenden möchten und Sie bereits eine Javascript-Lösung haben, würde ich einfach css (Anzeige: Tabelle, Anzeige: Tabellenzelle) verwenden und das Javascript einfügen bedingte Kommentare für IE6 und IE7.

Sie können dann einfach das Javascript entfernen, wenn die Zeit reif ist und in der Zwischenzeit, moderne Browser müssen es nicht ausführen.

Quelle

2010-02-10 15:57:13 jeroen

CSS Floated Div Höhe Problem, keine einfache Lösung?

Antwort

Verwandte Themen