Wie man die Höhe eines divs abhängig von der Höhe eines anderen div macht?

Nun, ich habe so einfache divs Struktur:Wie man die Höhe eines divs abhängig von der Höhe eines anderen div macht?

<div id="wrapper"> 
    <div id="1" class="block"> 
    1    
    </div> 
    <div id="2" class="block"> 
    2 
    </div> 
</div>

JS Fiddle

Inhalt von #1 kann durch Javascript dynamisch verändert und seine Höhe kann abhängig von Inhalt verändert werden. Was ich will, ist #2 die gleiche Höhe wie #1 machen. Ich verstehe, dass ich Javascript für diesen Zweck verwenden kann, aber ich schlage vor, dass es einige nicht so knifflige Weise geben muss, um die Höhen dieser divs gleich zu machen, nur mit CSS und/oder divs Positionierung wie.

Quelle

2012-12-15 Dmytro

Nein, nicht semantisch. Was Sie wollen, ist falsche Spalten, und es gibt eine Reihe von Techniken hier: http://css-tricks.com/fluid-width-equal-height-columns/ –

Ich würde es nicht empfehlen, es sei denn, Ihre Daten sind tabellarisch, aber haben Sie überlegten, Tabellen zu verwenden? – Wex

auf meinem Kommentar zu erweitern, können Sie es nicht semantisch tun. Sie müssen einen kleinen Trick verwenden, um die 100% Höhe zu fälschen. Es heißt falsche Spalten, und Sie können mehr here lesen.

In Ihrem Fall können wir fälschen durch ein paar Hintergrund divs hinzufügen:

<div class="background bg1"></div> 
<div class="background bg2"></div>

Dann CSS wie so zu ändern:

#wrapper { 
    border: 1px solid black; 
    position: relative; 
} 

#wrapper:after { 
    display: block; 
    content: " "; 
    height: 0; 
    clear: both; 
} 

.block { 
    position: relative; 
    float: left; 
    vertical-align: top; 
    width: 200px; 
    text-align: left; 
    min-height: 200px; 
    padding-left: 20px; 
    z-index: 2; 
} 

.background { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 200px; 
    z-index: 1; 
} 

.bg1 { 
    background-color: #eee; 
} 

.bg2 { 
    left: 200px; 
    background-color: #aaa; 
}

Hier ist eine Arbeits jsFiddle.

Quelle

2012-12-15 19:38:28

Und Flexbox ist angeblich die Zukunft, eines Tages. http://dev.w3.org/csswg/css3-flexbox/ –

Vielen Dank ... Es ist irgendwie komisch, dass so eine einfache Sache so knifflig gemacht werden muss ... – Dmytro

@JaredFarrish, hatte ich nicht das gesehen. Sieht sehr vielversprechend aus, sollte Teil der Spezifikation gewesen sein, als wir uns entschieden, Tabellen-basiertes Design zu töten: p –

Der jQuery Weg: Verwenden .height(), um die Höhe von Div1 zurückzukehren und dann einfach verwenden CSS-() Div2 zu Div1 Höhe einzustellen. Wenn sich div one ändert, können Sie das resize-Ereignis verwenden, um eine Funktion auszulösen, die die Höhe von div2 ändert.

Die CSS Art und Weise: Christian Varga Antwort scheint perfekt zu arbeiten.

Quelle

2012-12-15 19:26:47

Frage gibt _only css_ though: p –

Hinzufügen einer Möglichkeit, dies über CSS zu meiner Antwort zu tun. –

Haha aber "Höhe: erben" tut nicht, was Sie denken, dass es tut. –

Wie man die Höhe eines divs abhängig von der Höhe eines anderen div macht?

Antwort

Verwandte Themen