Inhaltbereich wird von absolut positioniertem Fußbereich überdeckt.

  • Hallo Forum-Mitglieder,


    habe die Lern-DVD von Herrn Pratzner erworben.
    Dort wird beschrieben, wie man den Fußbereich unten fixieren kann egal wieviel Inhalt vorhanden ist.
    Leider werden vom Fußbereich die letzt 1-2 Zeilen vom Inhalt überdeckt.
    Margin-Bottom hilft leider nur beim alten IE der im Scriply vorhanden ist.
    Beim aktuellen Google-Chrome und Firefox werden die unteren 2 Zeilen trotz Margin-Bottom überdeckt.


    Die Aufnahmen der DVD`s sind von 2010. Gab es in der Zwischenzeit vielleicht entscheidende Veränderungen?


    Mir ist klar, dass man in html5 normalerweise section und footer anstatt div`s mit ID`s verwendet. Wollte es jetzt aber erst mal wie im Video (div`s) nachbauen und testen.


    Bin absoluter Neuling und hoff ich blamiere mich mit meinem Problem jetzt nicht :|


    Über eure Hilfe würde ich mich freuen. LG Sven


    Hier meine Eingaben bei Scriptly:


    HTML:



    <!DOCTYPE html>
    <html>


    <head>
    <title>fuss unten</title>


    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">


    <link href="fuss-unten.css" type="text/css" rel="stylesheet">
    </head>


    <body>
    <div id="seite">
    <div id="inhalt">
    <p>inhalt</p>
    <p>inhalt</p>
    <p>inhalt</p>
    <p>inhalt noch einmal Inhalt</p>
    </div>


    <div id="fuss">Fussbereich</div>
    </div>
    </body>
    </html>



    CSS:



    * {
    margin: 0;
    padding: 0;
    }


    html, body {
    height: 100%;
    }


    #seite {
    position: relative;
    min-height: 100%;
    width: 500px;
    background-color: #808080;
    margin: 0 auto;
    }


    #inhalt {
    background-color: #FFFF00;
    margin-bottom: 2em;
    }


    #fuss {
    background-color: #FFC5A3;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 2em;
    line-height: 2em;
    }

  • Vielen Dank für deine Antwort.
    Das hat so weit funktioniert, allerdings halt mit der Einschränkung, dass man so halt den Innenabstand in Kauf nehmen muss.
    Das schränkt die Gestaltungsfreiheit halt schon ein. Dachte es müsste laut Herrn Pratzner auch mit dem Außenabstand möglich sein.
    LG Sven

  • Nein, im Video ist, soweit ich weiß, ein Fehler untergekommen. Er hat nämlich im Video von margin und auf der Website aber von padding geredet und dort auch auf dem Fehler im Video hingewiesen.


    Richtig ist also padding. :)

  • Herzlichen Dank für deine Info. Da ich die DVD habe und auch hauptsächlich damit arbeite, ist mir das leider entgangen.
    Du hast mir sehr geholfen.
    LG Sven

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!