• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sticky Footer ist nicht Sticky :D

Dr.Problem

Neues Mitglied
Hallo liebes Forum,

ich bin was HTML noch neu aber ich möchte dennoch immer wieder neue Sachen testen. Jetzt bin ich auf folgendes Problem gestoßen:

Ich habe eine Website im Flexbox Layout erstellt bestehend aus Header, nav, article,, aside und footer . Der Footer soll sich am unteren Rand befinden wenn der Inhalt mehr wird soll er mit nach unten wandern.



Leider klappt genau das nicht.

meine HTML und CSS Datei habe ich mal beigefügt..


Viele Grüße Marco

507150725073
 
Werbung:
Um das zu testen, müsste man den Code als Code haben.. und nicht als Bild. Sollen wir das etwa vom Bildschirm abtippen ... grrrr....?
Mein erster Verdacht... setze mal für 'body' statt 'height: 100%;' einfach mal 'min-height: 100vh;'
 
Das mit den min-height:100vh; hat bei mir leider nicht funktioniert..


Entschuldige hatte nicht nachgedacht :D
Hier die Dateien :)

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Gaststätte Ruhe</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="wrapper">

<header>Gaststätte Ruhe</header>


<div id="site">
<nav>Navigation</nav>
<article>Contentkfoskjvbvknninwvnnenvnjenwjnaaff <br>
fnkfnknvkdnvnndvnbnjvnjnbjn<br> jdnlnjnsjnvnjnejvnjnjbnjbn
Contentkfoskjvbvknninwvnnenvnjenwjnaaff
</article>
<aside>Informationen / Öffnungszeiten </aside>
</div>

<footer>Footer</footer>
</div>


</body>
</html>

CSS:

html{
height:100%<;
width:100%;
margin:0;
padding:0;
}
body {
min-height:100vh;
width:100%;
display:flex;
flex-direction: column;
margin:0;
padding:0;
}



#wrapper {
display:flex;
flex-direction: column;
min-height:100%;
}

header {
background-color: deepskyblue;
height:150px;
}

#site {
height:auto;
flex:1;
display:flex;
flex-direction: row;
background-color: silver;
}

nav{
flex:1;
background-color:darkgrey;
}

article {

background-color: orange;
flex: 5;

}

aside{
flex:1;
background-color: gray;

}

footer{
background-color: limegreen;
height:80px;

}

VG Marco
 
Werbung:
:smile:... geht doch! Aber es gibt hier im Forum für das Einfügen von Code spezielle 'Befehle'. Die verbergen sich hinter den ... (drei Punkte) in der Kopfzeile des Editors (direkt oberhalb des Eingabefeldes! Bei nächsten mal bitte ...!
In deinem CSS setzt du bitte noch für #wrapper..
CSS:
#wrapper {
   min-height:100vh;
}
zu dem, was da schon steht.
Dein Code sieht irgendwie 'seltsam' aus - aber da ich nicht weiß, was das werden soll und was du dir dabei denkst, kann ich da auch nichts weiter sagen als ... seltsam. Mag aber alles seine Richtigkeit haben, kommt eben darauf an, was du vor hast.
 
Danke dir! Ich probiere es gleich aus :)

Ja das der seltsam aussieht liegt vermutlich daran das es erstmal nur ein Entwurf wird :D

Danke für den Tipp
 
Versuch es mal damit.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>StickyFooter</title>
<meta charset="UTF-8">
<style>
* {
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}

body , html {
height:100vh;
}

header {
padding:10px;
background:#aaa;
height:150px;
}

main {
display:flex;
min-height:calc( 100vh - 230px );
background:#ada;
}

nav , aside {
padding:10px;
flex:1;
background:#09c;
}

section {
padding:10px;
flex:5;
background:#dad;
}

footer {
padding:10px;
height:80px;
background:#aaa;
}

</style>
</head>
<body>
<header>Gaststätte Ruhe</header>

<main>

<nav>Navigation</nav>

<section>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>

<aside>Information</aside>

</main>

<footer>Der Fußbereich</footer>
</body>
</html>
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben