Beiträge von Lisa F

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

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

Beiträge von Lisa F

Footer verschiebt sich

Footer verschiebt sich