Say I have the following "template" for what one of my pages should look like:
My pages consist of a header, a content section (different for each page), and a footer. Page height is the header height + content height + footer height. Notice the height of the footer; it's pretty tall/beefy. I'm OK with this.
I don't want a 'sticky' footer, instead I'm looking for the following functionality:
If the header height + content height is greater than viewport/window height, I don't want the footer to be visible until the user scrolls down to it (normal footer behavior); but...
If header height + content height + footer height is less than viewport/window height, I want the footer pinned down to the bottom of the viewport. Meaning if the content for a particular page is very small or is even coompletely empty, I want my header pinned to the top of the window, and the footer pinned to the bottom.
Example in jsFiddle
What do I need to do to change my footer div to exhibit the desired behavior?
<!-- What needs to change here? -->
<div class="footer ">
This should always be shown at the bottom if there isn't a lot of content to display below the header.
</div>
I think a sticky footer is exactly what you want (just not a fixed footer)
Taken directly from the wiki for sticky-footer:
Sticky Footer is a CSS technique used to anchor the footer section to the bottom of the page, regardless of the page's height. When the page height is less than the viewport, the Sticky Footer will be at the bottom of the viewport, and when the page height is longer than the viewport, the Sticky Footer will be at the bottom of the page.
Here's the canonical Sticky Footer Implementation:
http://ryanfait.com/html5-sticky-footer/
Here's a bare bones example:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</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>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
.footer {
background: yellow;
}
If you want to use bootstrap, just add the bootstrap CSS and whatever other classes you want
Simple Demo in Plunker
Bootstrap Demo in Plunker
Here is another simple solution
HTML
<body>
<header>
....
</header>
<div class="container" role="main">
....
</div>
<footer>
....
</footer>
</body>
JS
(function ($) {
var height = $('footer').height();
//update the value when page is loaded
$(document).ready(function () {
$('body').css({"margin-bottom" : height });
});
//update the value when the browser is resized (useful for devices which switch from portrait to landscape)
$(window).resize(function () {
$('body').css({"margin-bottom" : height });
});
})(jQuery);
CSS
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
[role="main"] {
padding-bottom:30px;
}
Related
I want my footer to be a sticky footer and tried following the css tricks negative margin trick, but did not work. I tried to impersonate my angular2 app in the below plunker code. I want the sticker not be fixed but sticky and go to the bottom when there are more content available in the main section. Note the footer is displayed above the data in the main section.
http://plnkr.co/edit/WSUC4xLMWH6fY77UyFqI?p=preview&open=app%2Fapp.component.ts
app.component:
<nav-bar></nav-bar>
<section class="main">
<div class="main-container">
Display my router-outlet here
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>
</div>
</section>
<footer-component></footer-component>
Any help to fix and move the footer down is appreciated.
You can still follow this example mentioned by
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Simply add this code to styles.scss
html,
body {
height: 100%;
}
In your app.component.scss
:host {
display: flex;
min-height: 100%; // used percent instead of vh due to safari bug.
flex-direction: column;
}
.Site-content {
flex: 1;
}
In your app.component.html
<header>...</header>
<main class="Site-content">..</main>
<footer>...</footer>
There are several ways to achieve this. I'm assuming you've tried one of these: CSS-tricks - Sticky footer, five ways.
For that to work, you would need to:
Remove absolute positioning of both the footer and the content.
Remove default top and bottom margins from body.
If you are not going with the flexbox or grid option, then place all content except for the footer inside of one element (so you can make sure the total height of that element plus the footer is at least the height of the viewport).
Here is an implementation of your Angular2 app with a sticky footer.
The sticky footer is achieved by wrapping all of the main content in a single div and using calc() to set it's minimum height to 100vh minus the footer's height.
I think it's not a good idea to make position:absolute for your .main block. Absolute positioning for your footer will be enough.
Try something like this
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
min-height: 100%;
padding-bottom: 55px;
}
#footer {
position: absolute;
bottom: 0;
}
Also remove margins and padding-top from .main block styles
You just have to edit 2 files:
index.html:
<!-- Full height body -->
<body class="pt-3 h-100">
<!-- Full height app container, and also use flexbox columns -->
<app-root class="d-flex flex-column h-100"></app-root>
</body>
app.component.html:
<router-outlet></router-outlet>
<!-- Footer top margin must be set on auto -->
<app-footer class="mt-auto"></app-footer>
I creating an new layout for a personal website.
I'm using Twitter Bootstrap 3, and my initial layout was made using as exemple
the "Bootstrap with sticky footer" sample (http://getbootstrap.com/examples/sticky-footer-navbar/)
This is my html:
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page navigation -->
<nav id="nav-container" class="navbar navbar-default container" role="navigation">
<div class="container">
<!-- Here I put a very normal Bootstrap 3 navbar -->
</div>
</nav>
<!-- Begin page content -->
<div id="main-container" class="container">
<!-- All my content goes here! -->
</div>
</div>
<!-- Begin page footer -->
<footer id="footer" class="container">
<div class="container">
</div>
</footer>
</body>
The Sticky Footer CSS:
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -100px;
/* Pad bottom by footer height */
padding: 0 0 100px;
}
/* Set the fixed height of the footer here */
#footer {
height: 100px;
}
And the custom style for my layout:
body {
/* Body's background will be grey */
background-color: #C0C0C0;
}
#main-container {
/* A box where I'll put the content will be white */
background-color: #FFFFFF;
}
#wrap {
height: 100%;
min-height: 100%;
}
#main-container {
min-height: 100%;
height: 100%;
}
This code generate this layout:
But, as you can see, the div #main-container don't grow 'till the end of the layout.
The div keep with the height of his content.
What I want is that this div always fills the entire page, like this:
Many solutions on internet said me to fix min-height to some tested value, but this way
I'll not be able to keep my website responsive (it's very important to me keep my layout
always responsive, that's the main reason I use Bootstrap 3).
Other solution goes to calculate the div height with javascript. Personally I don't like
this solution. I whish I could solve this only by using CSS.
Someone knows how to solve this problem?
As long as you are working on percentage, your site will be responsive. So using
min-height:100% does solve your problem which is just CSS. And if you don't want Javascript involved here, that is the way to go.
See the JS Fiddle DEMO. Your container is filling the entire page.
#main-container {
min-height: 100%;
background: #fff;
}
If you want to have sticky footer AND fullheight #main-container, you have to modify your structure. First, let me explain why you can't solve this with the sticky-footer method you're using right now:
Setting #main-container's height:100% or min-height:100% won't work because you can't use percentage height with a parent whose height is not strictly defined. Note that in the currently accepted answer this is considered a bug but it is not, it's just the way it is supposed to work. In your example #wrap's height is set to auto, so #main-container height just ignores the 100% and fallsback to auto.
To have both sticky footer and REAL fullheight #main-container (instead of faking with background) you have to use display:table and display:table-row. This works because when you use display:table, height:100% works just as your regular min-height:100% and the display:table-rows inside will always stretch to use all the vertical space available.
NOTE: this is different from using html tables, because in this case you don't need to bloat your markup with non-semantic tags, as you'll see in the following example.
Here's the example HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="maincontainer" class="astable">
<div id="header" class="astablerow">
header
</div>
<div id="middlecontainer" class="astablerow">
content
</div>
<div id="footer" class="astablerow">
footer
</div>
</div>
</body>
</html>
And here's the CSS
html, body{
margin:0;
padding:0;
height:100%;
}
.astable{
display:table;
height:100%;
table-layout:fixed;
width:100%;
}
.astablerow{
display: table-row;
}
#header{
height:30px;
background-color:#00ff00;
}
#footer{
height:30px;
background-color:#0000ff;
}
#middlecontainer{
background-color:#ff0000;
}
I think that min-height doesn't work due to a reported bug. See this: stackoverflow.com/questions/8468066.
An easy way to create the illusion that #main-container grows till the end, is to set #wrap's background-color the same value as #main-container's.
There is lots of info to get footer 100% wide or to extend 100% to bottom of browser.
My problem is a little different.
All the content of my site is wrapped in max-width container. But client wants the footer to be 100% wide and then if the page info is short, the footer must stretch to bottom of page.
So I have to put the footer outside the main container so that it can go right across the width of the page. But this means I can't use the
html , body {height:100%;}
option because making the footer 100% high will not help as it is outside main container.
So, ignoring the main container, how do I tell the standalone 100% wide footer to fill to the page to the bottom of the browser if the page is too short to fill the screen from top to bottom? How do i get the footer to fill that gap on the bottom?
Here is a simple copy of the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#main {
height: 100px;
max-width: 900px;
background-color: blue;
margin: auto;
}
footer {
width: 100%;
background-color: lightblue;
color: white;
}
</style>
</head>
<body>
<div id="main">
</div>
<footer>
Footer content
</footer>
</body>
</html>
How do I get the lightblue footer to go all the way to the bottom?
And please note that I don't want the footer to stick to the bottom, I need it to extend to the bottom of the browser from where ever it is on the bottom of the page.
jsFiddle DEMO
//css //
footer {
width: 100%;
background-color: lightblue;
position:absolute;
color: white;
bottom:0;
}
// jQuery //
$(function () {
var mainHt = $('#main').height();
$('footer').css('top', mainHt);
});
Please, consider the following jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/ (you can find the code after the body of the question).
It represents a trivial example of the classic header, content, footer HTML layout. Notice that:
The content never overlaps with the footer. Resizing the window will finally create a vertical scrollbar rather than move the content over the footer.
There are no redundant scrollbars.
No absolute heights, except of the footer, which may be assumed to be no higher than 2em.
The content height is less than the available height between the header and the footer.
I would like to keep the first three properties, but change the last one, so that the content height is the full height between the header and the footer. And I would like to do so without resorting to javascript.
How can I do so, if at all?
EDIT
The given html and css are just an example. You are free to change them as long as the final result satisfies the conditions of my question.
EDIT2
Apparently, I am not very clear on what I want to achieve with the content. Here is what I have now:
Notice how the content does not extend the full height available to it between the header and the footer.
What I am after is this:
(edited in mspaint, I do not know to do it really)
EDIT3
Added an except clause to the 3rd condition:
except of the footer, which may be assumed to be no higher than 2em.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
<div class="header">
Header goes here.
</div>
<div class="content">
<div class="innerWrapper">
Content goes here.
</div>
</div>
<div class="footer">
<div class="status">
Footer goes here.
<div>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #ddd;
}
.content {
padding: 0em 0em 2em; /* bottom padding for footer */
background-color: #bbb;
}
.footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
.status, .header {
background-color: #999;
border: solid 1px #000000;
}
There might be couple ways to do this, but the only ways i can think of at the moment all involve setting/knowing the height of your header and footer.
Here is one using display:table http://jsfiddle.net/fLnkf/
There may be other solutions depending on if your requirements allow you to change your html or use CSS3.
hope this helps!
The web page layout of my website look something as follows:
The web page layout of my website look something as follows:
<body>
<div class="container">
<div class="sidebar">
</div>
<div class="content">
</div>
</div>
<div class="pre-footer">
</div>
<div class="footer">
</div>
</body>
Css:
body {background:#eaeaea url('../images/bg/sfere.jpg') no-repeat top center fixed;}
.footer {float:left;width:100%;height:67px;background:url('../images/bottom.png') bottom center;bottom:0px;left:0px;}
.container{padding-top:5px;margin-left:100px;margin-right:auto;}
.sidebar {float:left;width:220px;min-height:610px;text-align:center;}
.home {margin:178px 0 0 100px;padding:0 10px 0px 10px;width:800px;float:left;}
.pre-footer {float:left;width:98%;height:100px;position:relative;background:url('../images/pre-footer.png') bottom center;left:15px;bottom:-32px;}
All the elements are appearing fine in layout. However, the problem is when the height of the container is less, the footer elements stick below the container and don't stay in the footer position. Similarly, if I manually fix the height as 600px to make it look like a footer, on browser resize, the footer still stick below the container and doesn't look like a footer.
How do I rectify this problem?
Use fixed position for your footer.
div.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
max-height: 50px; /* change this as needed */
}
and specify a bottom padding to your body to ensure all content is visible when scrolled.
body {
padding-bottom: 50px; /* change this to the max-height given for your footer */
}