Footer-Bereich wird überschrieben

[camouflage81]

Hallo zusammen,

ich hab ein Problem, dass ich nicht gelöst bekomme.
Im oberen Bereich meiner Homepage befindet sich der Header mit DropDown etc.
Ein paar Pixel darunter der Navigationsberech und darunter der Footer-Bereich.
Der Footer soll am Browser immer ganz unten sein.
Der Navigationsbreich kann unterschiedliche Höhen annehmen.
Sobald der Navigationsbereich über eine Seite hinaus geht, läuft er in den Footer-Bereich.
Ich bekomme es einfach nicht hin, dass der Navigations- und Footer-Bereich voneinenader getrennt bleiben.

Hier der HTML-Code:

<!-- Main Bereich Anfang -->
<div id="maindiv">
    <div id="navigation">
    </div>
    <div id="mainpage">
    </div>
</div>
<!-- Main Bereich Ende -->

<!--Footer Anfang -->
<div id="footer">
    <div id="footerleft">
        <h2>Letzte Änderung<br>20.05.2018</br></h2>
    </div>
    <div id="footermiddle">
        <h3>Copyright © 2018 xxx - Alle Rechte vorbehalten</h3>
    </div>
    <div id="footerright">
        <a href="#jump-body"><img src="HPimages/arrow-up.png" title="Zum Seitenanfang" alt="Zum Seitenanfang"></img></a>
    </div>
</div>
<!--Footer Ende -->

Hier der CSS-Code:

#maindiv
{
    width:100%;
    min-height:20px;
    left:0px;
    position:relative;
    top:50px;
}
#navigation
{
    width:20%;
    min-height:20px;
    float:left;
    background-color:blue;
}
#mainpage
{
    width:80%;
    min-height:20px;
    float:left;
    background-color:maroon;
}


#footer
{
    left:0px;
    width:100%;
    min-height:30px;
    position:fixed;
    bottom:0px;
}
#footerleft
{
    width:20%;
    min-height:30px;
    float:left;
}
#footermiddle
{
    width:60%;
    min-height:30px;
    float:left;
}
#footerright
{
    width:20%;
    min-height:30px;
    float:left;
}
#footerright img
{
    width:30px;
    height:30px;
    display:block;
    margin: 0px auto auto;
}

Hier der Fehler im Bild. Navigationsbereich ragt in den Footer


Danke für Eure Hilfe...

Gruß Thomas

 

[basti1012]

Mach es doch mit flexboxen . Ungefähr so

https://basti1012.bplaced.net/index.php?ordner=html&id=713

 

[camouflage81]

Danke für deine schnelle Antwort.
Mit den Flexboxen hab ich noch nie gearbeitet, werde ich mir aber nochmals genauer anschauen.
Wenn ich den Code so übernehme, erhalte ich folgende Meldung.




Der Navi- und Footer-Bereich werden auch in eine Ecke gedrückt. Das liegt wohl an der restlichen Seite :-(.
Ist zwar en super Ansatz, aber vllt gibt es zu meinem Code noch ne kleine Ergänzung das es funzt?
Hab bedenken wenn ich die Flexboxen auf die ganze Seite ausweite, dass dann nix mehr geht..

Gruß

 

[basti1012]

ja ich kann dir nur das zeigen was ich an Code sehe. Wenn du auf den rest der Seite noch feste Positionen hast und noch andere Container die anders positioniert sind geht das auch nicht so einfach.Dazu müßte man den rest Code sehen und ggf an Flexboxen anpassen.

Du hast ja bestimmt noch zwischen navigation und footer auch noch Container ? Die sollten mit in den flexboxen mit rein .
Wie du bei Codepen sehen kannst funktioniert der Codeschipsel ja weil da nur das ist was man sehen konnte von dein Code.

Wenn du willst dann poste doch mal alles ,oder ein Vorhandenen Link.

Mit deiner idee den footer zu Fixieren Funktioniert auch nur wenn alles andere eine feste größe hat ,außer du willst einen festen footer am unteren Bildschirmrand haben der immer da ist egal wie du gerade Scrollst

 

[camouflage81]

Bin heute leider nicht dazu gekommen. Melde mich nochmals. Bin dienstlich unterwegs diese Woche. Das ganze muss also bis zum nächsten Wochenende warten