Ich habe eine Website mit der folgenden Struktur:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Die Navigation ist auf der linken Seite und der Inhalt div ist auf der rechten Seite. Die Informationen für den Inhalt div wird in durch PHP gezogen, so dass es jedes Mal anders ist.
Wie kann ich die Navigation vertikal skalieren, so dass ihre Höhe mit der Höhe des Inhalts-Divs übereinstimmt, egal welche Seite geladen wird?
HINWEIS: Diese Antwort gilt für ältere Browser ohne Unterstützung für den Flexbox-Standard. Für einen modernen Ansatz, siehe: https://stackoverflow.com/a/23300532/1155721
Ich schlage vor, Sie werfen einen Blick auf Equal Height Columns with Cross-Browser CSS and No Hacks.
Grundsätzlich ist es nicht trivial, dies mit CSS in einer Browser-kompatiblen Weise zu tun (aber trivial mit Tabellen), also suchen Sie sich eine geeignete vorgefertigte Lösung.
Außerdem hängt die Antwort davon ab, ob Sie 100% Höhe oder gleiche Höhe wollen. Normalerweise ist es die gleiche Höhe. Wenn es 100% Höhe ist, ist die Antwort etwas anders.
Wenn es Ihnen nichts ausmacht, dass das Navigations-Div im Falle eines unerwartet kurzen Inhalts-Div abgeschnitten wird, gibt es zumindest eine einfache Möglichkeit:
#main {
position: relative;
}
#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}
#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}
Andernfalls gibt es die faux-columns Technik.
[Bezug nehmend auf Dmity's Less Code in einer anderen Antwort] Ich vermute, dass dies eine Art von "Pseudo-Code" ist?
Von dem, was ich verstehe, versuchen Sie mit der Faux-Spalten-Technik, die den Trick tun sollte.
http://www.alistapart.com/articles/fauxcolumns/
Hoffentlich hilft das :)