Verwenden von CSS zur Lösung höhenadaptiver Probleme

Ich bin sehr dagegen, js zur Lösung des hochadaptiven Problems zu verwenden, weil es nicht einfach zu warten und nicht natürlich genug ist. Es ist jedoch nicht einfach, reines CSS zu verwenden, wie das Beispiel, über das ich unten sprechen werde.

Anforderungen:

1 Die Höhe dieses Rechtecks ​​entspricht der Höhe des Browserfensters und vertikale Bildlaufleisten können nicht angezeigt werden.

2 Der grüne Teil ist fest, z. B. 50 Pixel

3. Füllen Sie den violetten Teil mit der verbleibenden Höhe

Die HTML-Struktur ist wie folgt:

nav

content

Schau zuerst 1.

HTML, Körper {

Höhe: 100 %;

Rand: 0px;

Polsterung: 0px;

}

#main {

Hintergrundfarbe: #999;

Höhe: 100 %;

}

Anforderung 2 ist auch sehr einfach:

#nav {

Hintergrundfarbe: #85d989;

Höhe: 50px;

}

Anforderung 3 Ja Das Schwierigste ist, dass wir im Allgemeinen an height:100 % denken, aber 100 % basiert auf der Höhe des übergeordneten Elements. Zum Beispiel die Höhe von Das übergeordnete Element ist 300 Pixel groß, #nav nimmt 50 Pixel ein und #content sollte 250 Pixel groß sein, aber als Höhe geschrieben: 100 %, ist das Ergebnis, dass die Höhe von #content ebenfalls 300 % beträgt und eine vertikale Bildlaufleiste angezeigt wird, was nicht der Fall ist durch Anforderungen erlaubt.

Natürlich ist es ganz einfach, js zu verwenden, um diese Art von Problem zu lösen, aber dieses Mal möchte ich einfach kein js verwenden, also versuchen wir es unten:

Diese Anforderung Es schien mir einfach, aber nachdem ich n Möglichkeiten ausprobiert hatte, fühlte ich mich alle unzuverlässig. Schließlich habe ich eine Methode gefunden, die dem idealen Effekt am nächsten kommt, wie folgt:

html, body {

Höhe: 100 %;

Rand: 0px;

Polsterung: 0px;

}

#main {

Hintergrundfarbe: #999;

Höhe: 100 %;

}

#nav {

Hintergrundfarbe: #85d989;

Breite: 100 %;

Höhe: 50 Pixel;

Float: links;

}

#content {

Hintergrundfarbe: #cc85d9;

height:100%;

}

Floating wird hier verwendet, und das Endergebnis sieht natürlich gut aus, wenn Sie nur Zeigen Sie Text und Bilder an. Diese Methode reicht aus. Wenn Sie jedoch js für eine Interaktion verwenden möchten, muss beispielsweise ein Element in #content gezogen werden. Der oberste Mindestwert darf nicht 0 sein. Andernfalls wird es von #nav blockiert. Die Tragödie liegt bei mir. Es gab so einen Bedarf, also habe ich mich weiterhin bemüht.

Nach einem Tag des Ausprobierens und einigen Ratschlägen von Experten habe ich endlich die Lösung gefunden. Ich brach in Tränen aus

#nav {

background-color: #85d989;

Breite: 100 %;

Höhe: 50 Pixel;

}

#content {

Hintergrundfarbe: #cc85d9;

Breite: 100 %;

Position: absolut;

oben: 50px;

unten: 0px;

links: 0px;

}

Der entscheidende Punkt ist die gemeinsame Verwendung von Ober- und Unterseite. Dies ist eine sehr unkonventionelle Verwendung. Sie kann den Bereich des Boxmodells kraftvoll definieren, was erstaunlich ist

Das obige ist der detaillierte Inhalt vonVerwenden von CSS zur Lösung höhenadaptiver Probleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!