CSS calc mit variabler Höhe

Ich habe zwei divs übereinander gestapelt. Das obere div enthält ein Akkordeonmenü und ist 300 px groß, wenn es vollständig erweitert ist. Die CSS für das Boden div ist:CSS calc mit variabler Höhe

Höhe: ber (100vh - 300px)

Dies funktioniert gut, wenn das Akkordeon in der oberen div voll ausgebaut ist - der untere div den Rest des vertikalen auffüllt Platz des Ansichtsfensters.

Das Problem tritt auf, wenn das Akkordeon in der oberen div wird zusammengebrochen. Jetzt ist das obere div nur 50px groß, aber das CSS für das untere div zieht immer noch 300px von 100vh ab.

Kann der Wert, der von 100vh subtrahiert wird, eine Variable anstelle eines festen Wertes sein? Anstatt eines fest codierten Pixelbetrags subtrahiert er die Höhe des obersten Divs.

Quelle

2016-10-28 John Beckwith

Nein, das ist nicht möglich. Aber das Akkordeon fällt vermutlich nicht von selbst in sich zusammen, aber es gibt etwas JavaScript. Wenn also das Akkordeon durch das Skript reduziert wird, können Sie auch eine Klasse für das untere div festlegen, die einen anderen Wert für die Höhe anwendet. – CBroe

Ja, ich dachte, es müsste ein paar js involviert sein, aber ich wollte keine CSS-Lösung übersehen. Danke für deine Antwort. –

Sie können einen Geschwisterselektor verwenden, um einen neuen Wert festzulegen, wenn Ihr Markup auf eine bestimmte Weise strukturiert ist.

In dem folgenden Code ein Geschwister-Selektor für das erweiterte Akkordeon verwendet wird, um den Standard berechnete Höhe des div darunter mit einem neuen

Ich habe zum Ziel und überschreibt versucht, es mit dieser Geige zu erklären: https://jsfiddle.net/L4ae0rq6/

HTML

<div class="accordion collapsed"></div> 
<div class="calc"></div> 
<hr/> 
<div class="accordion expanded"></div> 
<div class="calc"></div>

CSS

.accordion.collapsed { 
    height: 50px; 
    width: 200px; 
    background: grey; 
} 

.accordion.expanded { 
    height: 100px; 
    width: 200px; 
    background: grey; 
} 

.accordion.expanded + .calc { 
    height: calc(100vh - 300px); 
} 

.calc { 
    width: 200px; 
    height: calc(100vh - 200px); 
    background: lightgrey; 
}

Hoffe, das hilft.

Quelle

2016-10-28 18:04:22 link

Sie können flex verwenden.

Folgendes überprüfen:

.container { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 
.expandable { 
    background: red; 
    min-height: 40px; 
} 
.expandable.expanded { 
    flex-basis: 300px; 
} 
.filler { 
    background: green; 
    flex-grow: 1; 
}

Also, wenn die .expanded Klasse hinzugefügt wird es einen Raum von 300 Pixel sonst ein Minimum von 40 Pixel nimmt.

In jedem Fall wird die .filler den verbleibenden Speicherplatz nehmen, solange Sie flex-grow: 1 verwenden.

Demo

Quelle

2016-10-28 18:26:19 Sotiris

CSS calc mit variabler Höhe

Antwort

Verwandte Themen