After creating another post on absolute position footers we decided to add a quick post on how to create a sticky footer.
html{
position: relative;
min-height:100%;
}
body{
margin:0 0 100px;
}
footer{
position:fixed;
left:0;
bottom:0;
height:50px;
width:100%;
overflow:hidden;
}
Here’s the entire page:
<!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="How to create a sticky website footer with only CSS.">
<meta name="author" content="Projex">
<title>Sticky Footer Using Only CSS</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:fixed;
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">Sticky website footer with CSS</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>
<p>Pellentesque id justo in urna vestibulum interdum. Sed non nulla lobortis, luctus urna sit amet, venenatis massa. Donec nulla neque, tincidunt ut ligula at, consequat ullamcorper justo. Sed nec finibus urna. Pellentesque eu nibh est. Donec nisl nulla, scelerisque pretium felis id, cursus pretium sapien. Integer fringilla aliquam quam a aliquet. Donec neque est, dictum volutpat est sit amet, scelerisque tempor ligula. Vestibulum vulputate massa ipsum, nec pulvinar purus tempor a. Integer eu euismod odio. Fusce lectus dui, ornare vitae tincidunt in, maximus eu nulla. Quisque et nibh quis odio vulputate mollis in ut dolor. Suspendisse at fringilla elit, non efficitur turpis. Aliquam ut lorem vitae mauris imperdiet accumsan. Curabitur id pellentesque diam. Quisque nulla felis, tempor sit amet laoreet non, venenatis eget nisl.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ornare ac ligula a sagittis. Curabitur at sollicitudin lacus. In et iaculis lectus, eget laoreet nibh. Vivamus convallis elementum sapien in vehicula. Sed at consequat ipsum. Nunc quam eros, sollicitudin ac urna non, cursus convallis ipsum. Ut tincidunt sapien sapien, a consequat eros mattis eget.</p>
<p>Sed fringilla facilisis libero, quis pellentesque diam eleifend quis. Donec viverra, quam sed tempus rutrum, nisi dolor rutrum lorem, vitae mattis velit massa et nibh. Morbi non ligula commodo, porttitor odio quis, luctus risus. Proin in metus tortor. Curabitur elementum luctus magna, quis tempor enim ultrices nec. Nam condimentum cursus tempus. Suspendisse sit amet commodo ipsum. Nulla sit amet enim velit. Curabitur elit risus, finibus in augue id, fermentum egestas elit.</p>
<p>Pellentesque porttitor facilisis mauris nec mattis. Vestibulum sagittis tempus felis, quis efficitur sapien porta vel. Nam diam eros, porta non eros at, gravida aliquam quam. Pellentesque blandit sollicitudin sollicitudin. Mauris ac sapien rutrum, vehicula enim eu, eleifend diam. Proin non velit risus. Curabitur ut neque aliquam, rutrum purus ut, ornare justo. Etiam non quam vitae turpis suscipit finibus in ac neque. Suspendisse potenti.</p>
<p>Pellentesque ac facilisis risus. Pellentesque non tempus sapien, ut egestas felis. Nullam et ante et dui sagittis lacinia in vitae massa. Aliquam scelerisque, ante nec lobortis dapibus, ipsum tellus aliquam lectus, vitae suscipit nisi nisi sed sem. Suspendisse efficitur, enim id tempus fringilla, quam lectus pellentesque nisi, quis tincidunt risus nibh id lorem. Donec at neque a sem imperdiet posuere. Cras sit amet enim blandit, interdum mi eu, tincidunt lectus. Aenean est risus, tincidunt a sodales sed, placerat non quam. Vivamus cursus nulla vitae metus ultricies tincidunt. Duis cursus augue nisi, et placerat ipsum placerat in. Suspendisse efficitur ex vel dui dictum, ut gravida nunc tincidunt. Aliquam feugiat tincidunt cursus. Sed neque orci, fermentum id lorem sit amet, fermentum iaculis mi. Morbi a nisl et sem fringilla mollis. Praesent consectetur ultricies leo, vitae dapibus sem dignissim id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Ut consequat ornare risus, non elementum orci consectetur ac. In quis nisl ac lacus facilisis condimentum et nec orci. Nam non dapibus risus. Proin tempor metus at erat placerat laoreet. Praesent id efficitur ipsum, at iaculis eros. Integer non nulla quis leo ultrices hendrerit a vitae erat. Nulla facilisi. Praesent porttitor sed dui rhoncus egestas. Praesent ac nisi congue, vestibulum magna sit amet, congue massa. Integer mattis erat a risus volutpat, in tincidunt leo semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</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 check out the demo here.
