Hi I am trying to stick the footer the bottom of the page even when my page is thin on content.
I have tried to use below CSS code but it does not work.
Any suggestions?
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<aside class="left-panel">
</aside>
<section class="content">
<header class="top-head container-fluid">
</header>
<!-- Header Ends -->
<div class="warper container-fluid">
<div class="page-header"><h1>Blank Template <small>Start new page with this</small></h1></div>
<!-- Work Here -->
</div>
<!-- Warper Ends Here (working area) -->
<footer class="container-fluid footer">
Copyright © 2014 test
<i class="fa fa-chevron-up"></i>
</footer>
</section>
<!-- Content Block Ends Here (right box)-->
</body>
</html>
Related
Not really sure why the sticky footer isn't working in Bootstrap 4. I have a TYPO3 website which I am a beginner at.
The sticky footer is not sticking at the bottom of the page.
Here is a copy of the page source as it has been rendered.
I basically copied the html file from bootstraps docs folder and then modified it and copied it into my TYPO3 template.
If I fill the page with content, the footer does not stick - I have to scroll the page down to see it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">
<link rel="stylesheet" type="text/css"
href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
media="all">
<link rel="stylesheet" type="text/css"
href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
media="all">
<script
src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
type="text/javascript"></script>
<script
src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="mt-1">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the
viewport in desktop browsers with this custom HTML and CSS.</p>
<p>
Use <a href="../sticky-footer-navbar">the sticky footer with a
fixed navbar</a> if need be, too.
</p>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
<div class="col">1 of 3</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>
Update 2020 - Bootstrap 4.5+
Now that Bootstrap 4 is flexbox, it's easier to use flexbox for the sticky footer.
<div class="d-flex flex-column min-vh-100">
<nav>
</nav>
<main class="flex-fill">
</main>
<footer>
</footer>
</div>
Bootstrap 4.0 Sticky Footer (4.0.0)
Simple Footer at Bottom Example (4.5.0)
Note: The flex-fill utility was included in Bootstrap 4.1 at later release. So after that release the extra CSS for flex-fill won't be needed. Additionally min-vh-100 is included in newer Bootstrap 4 releases.
Also see: Bootstrap 4 - Sticky footer - Dynamic footer height
Managed to figure it out. Maybe I have a misunderstanding on what "Sticky" is or something, but the solution was to change absolute -> fixed in the css file.
e.g. from:
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
to:
.footer {
position: fixed;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
The example in the Bootstrap 4 docs has the following CSS:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
You've probably forgotten to set html { position: relative; min-height: 100%; } - I know I usually forget that part.
In Bootstrap 4, use the fixed-bottom class to stick your footer. No custom CSS needed:
<footer class="footer fixed-bottom">
...
</footer>
<html class="h-100">
.
.
</html>
This should solve the problem. It is similar to Benjineer's answer but ready bootstrap class.
Tested with Bootstrap 4.3.1
if you use
<footer class="footer fixed-bottom">
...
</footer>
remember to add
html {
padding-bottom: >= footer height;
}
to the CSS
to avoid blocking some content at the bottom of your page
I would like to add the Bootstrap Sticky Footer example to the white area of this Simple Sidebar example.
I am struggling as I cannot get it working. Either I fail when the content does not fit the screen or I fail when the content exceeds it.
Any hint?
Thank you all.
Just make sure the div is centered within the white area.
Then use position absolute or relative in the styling.
Take a look at my code and pay attention to where the footer div is placed in the html and how the styling is written. Hopefully this helps.
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Simple Sidebar - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<style>
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
There's a sticky-footer-navbar.css that seems to be missing in Sidebar Example. Here's the contents of that css file
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
From Bootstrap 4 you need to change the style so rather than the body you put the margin on page-content-wrapper.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
#page-content-wrapper {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
I am new to CSS and am trying to set up a page so that there is always a fixed margin / space between the page's main content (sidebar / sections) and the footer (e.g. 120px) which should work cross-browser.
Also, in case there is very little content on a page the footer should always appear at least at the bottom of the (visible) screen.
I made multiple attempts by applying a class footer, including the following, but the margin is always ignored.
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom
}
.footer:before {
clear: both;
display: block;
height: 120px;
min-height: 120px;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
</html>
Can someone help me with this?
Also, if anything should be changed regarding my HTML please let me know as well.
This should help:
html, body {
height: 100%;
}
body {
margin:0px;
padding: 0px;
}
.wrap {
height: auto;
margin: 0 auto -80px; /* footer height + space */
min-height: 100%;
padding: 0 0 80px; /* footer height + space */
box-sizing: border-box;
overflow: auto;
}
.footer {
background-color: #111111;
color: #eeeeee;
border-top: 1px solid red;
height: 60px; /* footer height */
padding-top: 20px;
display: block;
margin-top: 20px; /* space between content and footer */
box-sizing: border-box;
position: relative;
width: 100%;
}
<body>
<div class="wrap">
<nav>
<!-- ... -->
</nav>
<section id="sidebar">
<!-- ... -->
</section>
<section id="main">
<!-- ... -->
</section>
</div>
<footer class="footer">
<div>Some text</div>
</footer>
</body>
To add a margin between the body and footer, just add this to the style of the footer section:
padding:20px 0px 0px 0px;
Keeping the footer at the bottom is more complicated. Try something like this for css:
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper{ /*create a div around whole html body
min-height:100%;
position:relative;
}
#main{
padding-bottom:100px; /* Height of the footer element */
}
#footer {
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
color: #333;
}
Why you use ":before"?
Your css should look like this:
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
Try this example (works fine for me).
If it not works - make sure you use css reset.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ... -->
</head>
<body>
<nav style="background:grey;height:100px;">
<!-- ... -->
</nav>
<section id="sidebar" style="background:green;height:100px;">
<!-- ... -->
</section>
<section id="main" style="background:red;height:100px;">
<!-- ... -->
</section>
<footer class="footer" style="background:blue;">
<div>Some text</div>
</footer>
</body>
</html>
<style>
.footer {
color: #333;
font-size: 11px;
text-align: center;
vertical-align: bottom;
margin-top: 120px;
}
</style>
just give styling to body with margin 0px.
body{
margin: 0px;
}
I know I'm a little late to the party, but you could also just guesstimate with some set units for vh. Hacky, but it works in a pinch.
.wrap {
min-height: 70vh;
}
<div class="wrap">
<section id="chapterone">
<p>Lorem ipsum...</p>
...
</div>
<footer class="footer">
Home
...
</footer>
Solved!
In my case, I added id to the previous div (like "body") to the div above the footer div, as follows:
<div id="body" class="container">
...
</div>
<div class="row footer-row-bg">
...
</div>
Then, in my CSS file, I added padding-bottom:20px; for that id as follows:
#body{
padding-bottom:20px;
}
For some reason my footer is floating in the middle of the page. Driving my mad. I hope its just a quick fix. Ive looked online and all the answers seem to point to having a fixed footer and i dont want that as it displays horribly in smaller resolutions.
<!DOCTYPE html>
<html>
<head>
<title>MM Web Design</title>
<meta name="viewport" content="width=500, initial-scale=1">
<link rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<body>
<img class="logo" src="img/logo.png">
<div class id="nav">
<ul>
<li>Contact</li>
<li>About</li>
<li>Work</li>
<li>Home</li>
</ul>
<br>
</div>
<div class="wrapper">
<h1>Welcome to my Portfolio</h1>
<p>
yada yada yada
</p>
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<img src="img/body-metrix.png">
<img src="img/body-metrix-logo.png">
<img src="img/market.png">
</div>
</div>
<div class="footer-wrap">
<div class="footer">
<ul>
<li>Contact</li>
<li>About</li>
<li>Work</li>
<li>Home</li>
</ul>
</div>
</div>
</body>
</html>
CSS
.footer-wrap{
height:50px;
width:100%;
background:#333333;
margin: 0em;
}
.footer ul {
font-size: 18px;
font-weight: lighter;
list-style-type: none;
margin: 100px;
padding: 0;
text-decoration: none;
}
.footer ul li {
float: right;
display: block;
padding-left: 20px;
font-size: 0.75em;
}
Most likely, it's just displaying below the other divs.
Try sticky footer?
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
and css
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}
The divs are behaving exactly as they should be? And they are correctly ordered.
As soon as you fill content into the preceding div the footer will move down
If you want it to stay at the bottom of the window then it needs to be sticky as has already been suggested.
My goal is to have a footer that stays at the bottom of the page if there is little content, and moves to the bottom of all content if the page has a lot of content (requiring a scroll down).
I read this post Flushing footer to bottom of the page, twitter bootstrap , tried the layout and css, but still can't seem to get my page to work correctly.
This is my code layout - maybe I just made a slight mistake?
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
// Header Stuff
</div>
<div class="container">
<div class="jumbotron">
// h2
</div> // end jumbotron
<div class="row">
//ALL OF THE INFORMATIONAL CONTENT
</div> //end row
</div> //end container
<footer class="footer">
//INFORMATION / LINKS
</footer> //end footer
</body>
and with the name changes to the CSS code...
html, body {
height: 100%;
}
.container {
min-height: 100%;
}
.row {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
I think, css flexbox can help you in this. But, just beware of browser support.
HTML:
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
CSS:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
demo: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Click on Toggle Content Button right there to see the difference.
try this one...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>