Footer verschiebt sich

Lisa F

Hey Leute,

hab es durch die Flexbox nach einiger Zeit endlich geschafft den Footer immer am Seitenende zu platzieren, selbst bei einer Seite mit wenig Inhalt.
Jedoch funktioniert das ganze jetzt nicht mehr bei einer Seite mit Sidebar und Inhalt. Habe die Sidebar und links daneben den Inhalt zusammen in den Wrapper gepackt und der Footer springt wieder nach oben. Wie muss ich den Wrapper platzieren, damit der Footer weiterhin am Ende erscheint, auch wenn die Seite nur wenig Inhalt enthält?
Hier mal meine Codes:

Code

<div class="wrapper">    
    <div class="vokabeln-content">


            <h1>Vokabeln</h1>
            <h2>Alphabet</h2> 
            <table>
                <tr>
                     <th>Name</th>
                     <th>Isoliert</th>
                     <th>Anfang</th>
                     <th>Mitte</th>
                     <th>Ende</th>
                     <th>Aussprache</th>
                 </tr>
                 <tr>
                    <td></td>
                     <td></td>
                     <td></td>
                     <td></td>
                      <td></td>
                     <td></td>
                 </tr>
              </table>
        </div>     


    <aside class="vokabeln-aside">


            <a href="#" id="Tiere">Tiere</a>
            <a href="#" id="Büro">Büro</a>
            <a href="#" id="Reisen">Reisen</a>

    </aside>
</div>

Alles anzeigen

Und das habe ich im CSS:

Code

body {
    background: url(Hintergrund.jpg);
    background-size: cover;
    width: 100%;
    display: flex;
    min-height: 100vh;
    margin: 0 auto;
    flex-direction: column;
}


.wrapper {
    position: relative;
    min-height: 100%;
    width: 960px;
    max-width: 90%;
    margin: 0 auto;
}


.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}


.clearfix:after {
    clear: both;
}
.vokabeln-content,
.vokabeln-aside {
    float: left;
    height: 100%;
    flex: 1 0 auto;
}


.vokabeln-content {
    width: 80%;
    margin-top: 205px;
    border-right: 1px solid black;
    margin-bottom: 80px;
}


.vokabeln-content h1 {
    text-align: center;
    font-size: 3em;   
}


.vokabeln-content h2 {
    padding-top: 30px;
    text-align: center;
    margin: 20px;
    font-size: 2em; 
}




.vokabeln-aside {
    width: 19%;
    top: 0;
    left: 0;
    margin-top: 180px;
}


.vokabeln-aside a {


    text-align: left;
    display: block; width: 88px; height: 21px;
    margin-top: 20px;
    margin-left: 20px;
    text-decoration: none;
    font-weight: bold;
    color: black;
    font-size: 1.8em;
}

Alles anzeigen

Bin echt für jede Hilfe dankbar

LG Lisa

basti1012

wo ist den der Footer genau ? Flexbox ist eigentlich dazu da um auf position und float zu verzichten.Dein Wg den body und wrapper ein min-height von 100vh(100%) zu geben ,zwingt den footer auch unten zu bleiben,aber das sollte man eigentlich anders machen.
Flexbox bietet da auch bessere möglichkeiten dein Layout umzusetzen.

Vieleicht kuckst du hier nochmal rein das könnte dir helfen
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Lisa F

Vielen Dank für den Link, allerdings haben mein body und wrapper schon ein min height von 100%. Auf meiner Seite "Kontakt" mit wenig Inhalt funktioniert alles wunderbar, der footer ist ganz unten. Doch bei dieser Seite mit Tabelle und Sidebar schiebt er sich unter das letzte Element und steht in der Bildschirmmitte.
Wenn ich das float left bei content und aside weglasse, schiebt sich der aside Text unter den content, anstatt rechts nebendran als Sidebar.

Das ist mein footer:

Code

#footer {
    z-index: 0;
    overflow: hidden;
    flex: none;
    width: 100%;
    height: 80px;
    background-color: black;
}


#footer a {
    float: left;
    text-align: center;
    display: block; width: 80px; height: 18px;
    margin-right: 12px;
    margin-top: 10px;
    text-decoration: none;
    font-weight: bold;
    color: gold;
    font-size: 0,5em;
}

Alles anzeigen

basti1012

kannst du mal link zur Seite posten ?

Tags