Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Fehler bei der Positiopnierung

Fehler bei der Positiopnierung

Hallo, ich habe das Problem, dass sich die Fußzeile über den Inhalt legt, wenn der Inhalt größer wird als die Seitenhöhe. Das sieht dann nicht mehr so prickelnd aus. Mir ist klar, dass ich irgendetwas falsch positioniert habe. Ich weiß nur nicht was. Hier ist mal eine kurze Beschreibung. Ein Div das alles umschließt. Darin befindet sich ein weiters Div, dass die Navigation, den Inhalt, Hörproben und die Fußzeile beinhaltet. Navigation, Inhalt und Hörproben stehen in 3 Spalten nebeneinander. Die Fußzeile ist unten auf der Seite positioniert.

Der hier verwendete Code

<html> <style> body{ display:flex; flex-direction:column; text-align: center; height:100%; width: 100%; padding: 5px 0 5px 0; } header{ border:1px solid black; height:50px; } footer{ border:1px solid black; height:50px; } nav{ border:1px solid black; height:30px; } main{ align-content: stretch; display:flex; height:auto; } main div{ flex:1; border:1px solid black; } </style> <body> <header>Header</header> <nav>Navigation</nav> <main> <div>Navigation<br> dsddd<br>fff<br>hj </div> <div>Inhalt</div> <div>Hörprober</div> </div> </div> </main> <footer> Fusszeile</footer> </body> </html>