Skip to main content
CSSHTML

Force Footer to Bottom of a Short Content Page

By March 9, 2018No Comments

How do you get a footer to stay at the bottom of a Web page when the content of the page is too short?  There are a few options.

Option 1 – You can setup a sticky footer that always shows at the bottom of the browser window.

Option 2 – Update the CSS to account for short content pages and pull the footer down to the bottom of the browser.  In doing this you can still allow the footer to function normally on pages with content then extend below the fold.

For this example we’ll run through option 2.  You can use a min-height on the html element and then position the footer as absolute.

Here’s the CSS:

html{
	position: relative;
	min-height:100%;
}
body{
	margin:0 0 100px;
}
footer{
	position:absolute;
	left:0;
	bottom:0;
	height:50px;
	width:100%;
	overflow:hidden;
}

Here’s an example of the entire page:

<?php


?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Force Footer to Bottom of a Short Content Page.">
    <meta name="author" content="Projex">

    <title>Force Footer to Bottom of a Short Content Page</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/pricing.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <style>
        html{
            position: relative;
            min-height:100%;
        }
        body{
            margin:0 0 100px;
        }
        footer{
            position:absolute;
            left:0;
            bottom:0;
            height:50px;
            width:100%;
            overflow:hidden;
        }
    </style>
</head>

<body>

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
    <h5 class="my-0 mr-md-auto font-weight-normal"><img src="https://www.prodjex.com/wp-content/uploads/2017/10/dsmall.png.webp"/></h5>
    <nav class="my-2 my-md-0 mr-md-3">
        <a class="p-2 text-dark" href="https://www.prodjex.com">Home</a>
        <a class="p-2 text-dark" href="https://www.prodjex.com/web-development-blog/">Web Development Blog</a>
    </nav>
</div>

<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
    <div class="col-md-12">
        <h1 class="display-4">Force Footer to Bottom of a Short Content Page</h1>
        <p class="lead"></p>
    </div>
    <div class="col-md-12 giveSpace">
        <div class="parentClass">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras purus lacus, lacinia sed tellus euismod, egestas molestie nisl. Sed molestie sit amet diam a lacinia. Quisque mollis orci tincidunt urna luctus, vitae fermentum ligula dignissim. Curabitur volutpat sodales arcu sed dignissim. Phasellus dictum posuere risus nec consequat. Ut sed massa ullamcorper, commodo orci nec, gravida dolor. Suspendisse nec bibendum ex, non tristique risus. Curabitur metus ante, tincidunt a accumsan vitae, suscipit elementum purus.

            <p>Donec pretium lacus sed ex cursus, maximus semper ipsum tincidunt. Quisque sapien orci, hendrerit ac posuere auctor, egestas faucibus enim. Suspendisse potenti. Nulla imperdiet malesuada posuere. Duis commodo vitae justo id consectetur. Curabitur eu imperdiet justo. Donec sapien dui, euismod eget lectus id, feugiat interdum nibh. Etiam quis neque convallis, interdum lectus id, bibendum nibh. Nullam tellus magna, sagittis vitae sapien ac, dapibus dignissim dui. Integer scelerisque, nulla in varius gravida, mi erat porttitor arcu, nec sodales ex felis eget libero. Maecenas non suscipit mi, efficitur consectetur odio.</p>
        </div>
    </div>
</div>

<footer>
    <div class="copyright">Prodjex <?php echo date('Y');?></div>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

You can see a demo of this in action here.

Tags:

Leave a Reply