joe-oli · September 25, 2019 14:10
diff --git a/Sticky-Footer-1.html b/Sticky-Footer-1.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="utf-8">
    <title>Sticky Footer Demo 1</title>

    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            overflow-y:hidden; /* dont show Browser's scrollbar ever */
        }

        .header {
            background-color:wheat;
            height:30px;
        }
        .content {
            height: calc(100vh - 62px); /* -30px -30px -1px -1px */
            width: calc(100vw - 2px); /* -2px for left/right border */
            background: aliceblue;
            overflow-y:auto;
            border:1px dashed red;
        }

        .footer {
            position:absolute;
            bottom:0;height:30px;
            width:100%;
            background-color:violet;
            z-index: -1;
        }
    </style>
 </head>


 <body>
    <div class="header">My Header</div>

    <div class="content">
        <h3>Sticky footer demo - no flexbox</h3>

        Drag to change Browser height and observe:
        <ul>
            <li>Header,Footer of fixed height;</li>
            <li>vertical scrollbar appears on content;</li>
            <li>Content stretches to follow viewport height (minus header/footer);</li>
        </ul>
        The height of this DIV element is equal to the 100% height of its parent element's height.
    
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A arcu cursus vitae congue mauris rhoncus aenean vel. Tellus in metus vulputate eu scelerisque felis. Facilisi morbi tempus iaculis urna id volutpat. Varius quam quisque id diam vel quam. Malesuada fames ac turpis egestas. In fermentum posuere urna nec tincidunt praesent semper feugiat. Tristique magna sit amet purus gravida. Condimentum mattis pellentesque id nibh tortor id aliquet lectus. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Lectus sit amet est placerat in. Morbi non arcu risus quis varius quam quisque id. Dictum at tempor commodo ullamcorper a lacus vestibulum. Justo laoreet sit amet cursus sit. Nullam ac tortor vitae purus faucibus ornare suspendisse.
        </p>
        <p>
            Sed vulputate odio ut enim blandit volutpat. Fermentum leo vel orci porta non pulvinar neque laoreet. Dui nunc mattis enim ut tellus. In cursus turpis massa tincidunt dui ut. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Mauris sit amet massa vitae tortor condimentum lacinia quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Quisque id diam vel quam elementum pulvinar etiam non. Eget velit aliquet sagittis id consectetur purus ut. Turpis egestas integer eget aliquet nibh praesent tristique magna sit. Neque sodales ut etiam sit amet nisl purus in. Mi quis hendrerit dolor magna eget est lorem ipsum dolor. At imperdiet dui accumsan sit. Arcu dictum varius duis at consectetur. Velit laoreet id donec ultrices tincidunt arcu non sodales. Condimentum mattis pellentesque id nibh. Lorem dolor sed viverra ipsum nunc. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Neque ornare aenean euismod elementum nisi quis eleifend. Dolor sit amet consectetur adipiscing elit pellentesque.
        </p>
        <p>
            Adipiscing bibendum est ultricies integer. Mattis enim ut tellus elementum sagittis vitae et leo duis. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Lorem ipsum dolor sit amet. Aliquam sem et tortor consequat id porta nibh venenatis. Risus at ultrices mi tempus imperdiet nulla malesuada. Donec enim diam vulputate ut pharetra sit amet aliquam. Viverra vitae congue eu consequat. Ut pharetra sit amet aliquam id diam maecenas ultricies mi. Tincidunt eget nullam non nisi est sit. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Eget nulla facilisi etiam dignissim diam quis enim lobortis. Dictum non consectetur a erat nam at lectus urna duis. Id volutpat lacus laoreet non curabitur gravida. Orci dapibus ultrices in iaculis.
        </p>
        <p>
            Sollicitudin ac orci phasellus egestas. Sem et tortor consequat id porta. Nulla aliquet enim tortor at auctor urna. Sagittis orci a scelerisque purus semper eget. Sed viverra ipsum nunc aliquet bibendum. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Tristique senectus et netus et. Nullam ac tortor vitae purus. At volutpat diam ut venenatis tellus in metus vulputate eu. Faucibus turpis in eu mi bibendum neque. Ac orci phasellus egestas tellus. Scelerisque varius morbi enim nunc faucibus a pellentesque sit. Pellentesque nec nam aliquam sem et tortor consequat id porta. Viverra orci sagittis eu volutpat odio facilisis mauris. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum.
        </p>
        <p>
            Sagittis eu volutpat odio facilisis mauris sit amet massa. Diam maecenas sed enim ut sem viverra aliquet eget. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Scelerisque in dictum non consectetur a erat nam at lectus. Mauris pellentesque pulvinar pellentesque habitant morbi. Laoreet non curabitur gravida arcu ac tortor. Velit egestas dui id ornare arcu odio. Tellus elementum sagittis vitae et leo duis ut diam quam. Elementum integer enim neque volutpat ac tincidunt vitae semper. Dictum at tempor commodo ullamcorper. Fermentum dui faucibus in ornare quam viverra orci sagittis. Tincidunt id aliquet risus feugiat in ante metus dictum at. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Lorem donec massa sapien faucibus et molestie ac. 
            <br/>LAST LINE OF THE LAST PARAGRAPH !! YAY.
        </p>
    </div>

    <div class="footer">
        &copy;My Footer
    </div>
 </body>

 </html>