w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
HTML - Setting container background & height @ 100% minimum

I would like to suggest a simpler approach. Look carefully at the CSS, especially the position:fixed property/value.

If you add more content or make your window smaller, you will see it scrolls as desired. This is a simplified version of what I found here.

<html>
<head>
<title>Fixed Footer</title>
<style type="text/css">
    body{ margin:0px; padding:0px;background:black}

    #maincontent{
        width:500px;
        background:#fff;
        padding:20px 20px 0px 20px;
        margin:0px auto;
    }

    #footer{
        position:fixed;
        left:0px;
        bottom:0px;
        width:100%;
        background:#990000;
        line-height:30px;
        color:#fff;
    }
    #footer span{padding-left:20px;}
</style>
</head>

<body>
    <div id="maincontent">
    <h1>Fixierter Footer, nur mit CSS</h1>
    <p>Das Folgende Script macht genau das, nur halt im CSS
alleine.</p>
    <p>Das Folgende Script macht genau das, nur halt im CSS
alleine.</p>
    <p>Das Folgende Script macht genau das, nur halt im CSS
alleine.</p>
    </div>
    <div id="footer"><span>Ich bin Footer, der immer hier unten
bleibt :-)</span></div>
</body>

</html>




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.