Related
I have a simple 2-column layout with a footer that clears both the right and left div in my markup. My problem is that I can't get the footer to stay at the bottom of the page in all browsers. It works if the content pushes the footer down, but that's not always the case.
To get a sticky footer:
Have a <div> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper place the
<div class="footer"></div>.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Use CSS vh units!
Probably the most obvious and non-hacky way to go about a sticky footer would be to make use of the new css viewport units.
Take for example the following simple markup:
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
If the header is say 80px high and the footer is 40px high, then we can make our sticky footer with one single rule on the content div:
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
Which means: let the height of the content div be at least 100% of the viewport height minus the combined heights of the header and footer.
That's it.
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
... and here's how the same code works with lots of content in the content div:
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
This is my footer
</footer>
NB:
1) The height of the header and footer must be known
2) Old versions of IE (IE8-) and Android (4.4-) don't support viewport units. (caniuse)
3) Once upon a time webkit had a problem with viewport units within a calc rule. This has indeed been fixed (see here) so there's no problem there. However if you're looking to avoid using calc for some reason you can get around that using negative margins and padding with box-sizing -
Like so:
* {
margin:0;padding:0;
}
header {
background: yellow;
height: 80px;
position:relative;
}
.content {
min-height: 100vh;
background: pink;
margin: -80px 0 -40px;
padding: 80px 0 40px;
box-sizing:border-box;
}
footer {
height: 40px;
background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum
</div>
<footer>
This is my footer
</footer>
Sticky footer with display: flex
Solution inspired by Philip Walton's sticky footer.
Explanation
This solution is valid only for:
Chrome ≥ 21.0
Firefox ≥ 20.0
Internet Explorer ≥ 10
Safari ≥ 6.1
It is based on the flex display, leveraging the flex-grow property, which allows an element to grow in either height or width (when the flow-direction is set to either column or row respectively), to occupy the extra space in the container.
We are going to leverage also the vh unit, where 1vh is defined as:
1/100th of the height of the viewport
Therefore a height of 100vh it's a concise way to tell an element to span the full viewport's height.
This is how you would structure your web page:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
In order to have the footer stick to the bottom of the page, you want the space between the body and the footer to grow as much as it takes to push the footer at the bottom of the page.
Therefore our layout becomes:
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
Implementation
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
}
<body>
<div class="content">Hello World!</div>
<div class="spacer"></div>
<footer class="footer"></footer>
</body>
You can play with it at the JSFiddle.
Safari quirks
Be aware that Safari has a flawed implementation of the flex-shrink property, which allows items to shrink more than the minimum height that would be required to display the content.
To fix this issue you will have to set the flex-shrink property explicitly to 0 to the .content and the footer in the above example:
.content {
flex-shrink: 0;
}
.footer {
flex-shrink: 0;
}
Alternatively, change the flex style for the spacer element into:
.spacer {
flex: 1 0 auto;
}
This 3-value shorthand style is equivalent to the following full setup:
.spacer {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
Elegantly works everywhere.
You could use position: absolute following to put the footer at the bottom of the page, but then make sure your 2 columns have the appropriate margin-bottom so that they never get occluded by the footer.
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
Here is a solution with jQuery that works like a charm. It checks if the height of the window is greater than the height of the body. If it is, then it changes the margin-top of the footer to compensate. Tested in Firefox, Chrome, Safari and Opera.
$( function () {
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '#footer' ).css( 'margin-top', height_diff );
}
});
If your footer already has a margin-top (of 50 pixels, for example) you will need to change the last part for:
css( 'margin-top', height_diff + 50 )
Set the CSS for the #footer to:
position: absolute;
bottom: 0;
You will then need to add a padding or margin to the bottom of your #sidebar and #content to match the height of #footer or when they overlap, the #footer will cover them.
Also, if I remember correctly, IE6 has a problem with the bottom: 0 CSS. You might have to use a JS solution for IE6 (if you care about IE6 that is).
A similar solution to #gcedo but without the need of adding an intermediate content in order to push the footer down. We can simply add margin-top:auto to the footer and it will be pushed to the bottom of the page regardless his height or the height of the content above.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
.content {
padding: 50px;
background: red;
}
.footer {
margin-top: auto;
padding:10px;
background: green;
}
<div class="content">
some content here
</div>
<footer class="footer">
some content
</footer>
Just invented a very simple solution that worked great for me. You just wrap all page content except for the footer within in a div, and then set the min-height to 100% of the viewpoint minus the height of the footer. No need for absolute positioning on the footer or multiple wrapper divs.
.page-body {min-height: calc(100vh - 400px);} /*Replace 400px with your footer height*/
I have myself struggled with this sometimes and I always found that the solution with all those div's within each other was a messy solution.
I just messed around with it a bit, and I personally found out that this works and it certainly is one of the simplest ways:
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
What I like about this is that no extra HTML needs to be applied. You can simply add this CSS and then write your HTML as whenever
Since the Grid solution hasn't been presented yet, here it is, with just two declarations for the parent element, if we take the height: 100% and margin: 0 for granted:
html, body {height: 100%}
body {
display: grid; /* generates a block-level grid */
align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
margin: 0;
}
.content {
background: lightgreen;
/* demo / for default snippet window */
height: 1em;
animation: height 2.5s linear alternate infinite;
}
footer {background: lightblue}
#keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>
align-content: space-between
The items are evenly distributed within the alignment container along
the cross axis. The spacing between each pair of adjacent items is the
same. The first item is flush with the main-start edge, and the last
item is flush with the main-end edge.
CSS :
#container{
width: 100%;
height: 100vh;
}
#container.footer{
float:left;
width:100%;
height:20vh;
margin-top:80vh;
background-color:red;
}
HTML:
<div id="container">
<div class="footer">
</div>
</div>
This should do the trick if you are looking for a responsive footer aligned at the bottom of the page,which always keeps a top-margin of 80% of the viewport height.
For this question many of the answers I have seen are clunky, hard to implement and inefficient so I thought I'd take a shot at it and come up with my own solution which is just a tiny bit of css and html
html,
body {
height: 100%;
margin: 0;
}
.body {
min-height: calc(100% - 2rem);
width: 100%;
background-color: grey;
}
.footer {
height: 2rem;
width: 100%;
background-color: yellow;
}
<body>
<div class="body">test as body</div>
<div class="footer">test as footer</div>
</body>
this works by setting the height of the footer and then using css calc to work out the minimum height the page can be with the footer still at the bottom, hope this helps some people :)
Use absolute positioning and z-index to create a sticky footer div at any resolution using the following steps:
Create a footer div with position: absolute; bottom: 0; and the desired height
Set the padding of the footer to add whitespace between the content bottom and the window bottom
Create a container div that wraps the body content with position: relative; min-height: 100%;
Add bottom padding to the main content div that is equal to the height plus padding of the footer
Set the z-index of the footer greater than the container div if the footer is clipped
Here is an example:
<!doctype html>
<html>
<head>
<title>Sticky Footer</title>
<meta charset="utf-8">
<style>
.wrapper { position: relative; min-height: 100%; }
.footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
.column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; }
/* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */
</style>
</head>
<body>
<div class="wrapper">
<div class="column">
<span>hello</span>
</div>
<div class="footer">
<p>This is a test. This is only a test...</p>
</div>
</div>
</body>
</html>
One solution would be to set the min-height for the boxes. Unfortunately it seems that it's not well supported by IE (surprise).
None of these pure css solutions work properly with dynamically resizing content (at least on firefox and Safari) e.g., if you have a background set on the container div, the page and then resize (adding a few rows) table inside the div, the table can stick out of the bottom of the styled area, i.e., you can have half the table in white on black theme and half the table complete white because both the font-color and background color is white. It's basically unfixable with themeroller pages.
Nested div multi-column layout is an ugly hack and the 100% min-height body/container div for sticking footer is an uglier hack.
The only none-script solution that works on all the browsers I've tried: a much simpler/shorter table with thead (for header)/tfoot (for footer)/tbody (td's for any number of columns) and 100% height. But this have perceived semantic and SEO disadvantages (tfoot must appear before tbody. ARIA roles may help decent search engines though).
Multiple people have put the answer to this simple problem up here, but I have one thing to add, considering how frustrated I was until I figured out what I was doing wrong.
As mentioned the most straightforward way to do this is like so..
html {
position: relative;
min-height: 100%;
}
body {
background-color: transparent;
position: static;
height: 100%;
margin-bottom: 30px;
}
.site-footer {
position: absolute;
height: 30px;
bottom: 0px;
left: 0px;
right: 0px;
}
However the property not mentioned in posts, presumably because it is usually default, is the position: static on the body tag. Position relative will not work!
My wordpress theme had overridden the default body display and it confused me for an obnoxiously long time.
An old thread I know, but if you are looking for a responsive solution, this jQuery addition will help:
$(window).on('resize',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({'height': fh});
$("#wrapper").css({'margin-bottom': -fh});
}
Full guide can be found here: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/
I have created a very simple library https://github.com/ravinderpayal/FooterJS
It is very simple in use. After including library, just call this line of code.
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
Footers can be dynamically changed by recalling above function with different parameter/id.
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
Note:- You haven't to alter or add any CSS. Library is dynamic which implies that even if screen is resized after loading page it will reset the position of footer. I have created this library, because CSS solves the problem for a while but when size of display changes significantly,from desktop to tablet or vice versa, they either overlap the content or they no longer remains sticky.
Another solution is CSS Media Queries, but you have to manually write different CSS styles for different size of screens while this library does its work automatically and is supported by all basic JavaScript supporting browser.
Edit
CSS solution:
#media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
Now, if the height of display is more than your content length, we will make footer fixed to bottom and if not, it will automatically appear in very end of display as you need to scroll to view this.
And, it seems a better solution than JavaScript/library one.
I wasn't having any luck with the solutions suggested on this page before but then finally, this little trick worked. I'll include it as another possible solution.
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
For me the nicest way of displaying it (the footer) is sticking to the bottom but not covering content all the time:
#my_footer {
position: static
fixed; bottom: 0
}
jQuery CROSS BROWSER CUSTOM PLUGIN - $.footerBottom()
Or use jQuery like I do, and set your footer height to auto or to fix, whatever you like, it will work anyway. this plugin uses jQuery selectors so to make it work, you will have to include the jQuery library to your file.
Here is how you run the plugin. Import jQuery, copy the code of this custom jQuery plugin and import it after importing jQuery! It is very simple and basic, but important.
When you do it, all you have to do is run this code:
$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer"
// by setting target to {target:"div.footer"}
there is no need to place it inside the document ready event. It will run well as it is. It will recalculate the position of your footer when the page is loaded and when the window get resized.
Here is the code of the plugin which you do not have to understand. Just know how to implement it. It does the job for you. However, if you like to know how it works, just look through the code. I left comments for you.
//import jQuery library before this script
// Import jQuery library before this script
// Our custom jQuery Plugin
(function($) {
$.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
var defaults = {
target: "footer",
container: "html",
innercontainer: "body",
css: {
footer: {
position: "absolute",
left: 0,
bottom: 0,
},
html: {
position: "relative",
minHeight: "100%"
}
}
};
options = $.extend(defaults, options);
// JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
$(options.target).css({
"position": options.css.footer.position,
"left": options.css.footer.left,
"bottom": options.css.footer.bottom,
});
$(options.container).css({
"position": options.css.html.position,
"min-height": options.css.html.minHeight,
});
function logic() {
var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
$(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
$(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
};
// DEFINE WHEN TO RUN FUNCTION
$(window).on('load resize', function() { // Run on page loaded and on window resized
logic();
});
// RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
// return this.each(function() {
// this.checked = true;
// });
// return this;
};
})(jQuery); // End of plugin
// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
box-sizing: border-box;
height: auto;
width: 100%;
padding: 30px 0;
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
<div class="content">
<header>
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</header>
<section>
<p></p>
<p>Lorem ipsum...</p>
</section>
</div>
<footer>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
</footer>
The flex solutions worked for me as far as making the footer sticky, but unfortunately changing the body to use flex layout made some of our page layouts change, and not for the better. What finally worked for me was:
jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");
});
I got this from ctf0's response at https://css-tricks.com/couple-takes-sticky-footer/
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 3px solid #73AD21;
}
<body style="height:1500px">
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
If you don't want it using position fixed, and following you annoyingly on mobile, this seems to be working for me so far.
html {
min-height: 100%;
position: relative;
}
#site-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 6px 2px;
background: #32383e;
}
Just set the html to min-height: 100%; and position: relative;, then position: absolute; bottom: 0; left: 0; on the footer. I then made sure the footer was the last element in the body.
Let me know if this doesn't work for anyone else, and why. I know these tedious style hacks can behave strangely among various circumstances I'd not thought of.
REACT-friendly solution - (no spacer div required)
Chris Coyier (the venerable CSS-Tricks website) has kept his page on the Sticky-Footer up-to-date, with at least FIVE methods now for creating a sticky footer, including using FlexBox and CSS-Grid.
Why is this important? Because, for me, the earlier/older methods I used for years did not work with React - I had to use Chris' flexbox solution - which was easy and worked.
Below is his CSS-Tricks flexbox Sticky Footer - just look at the code below, it cannot possibly be simpler.
(The (below) StackSnippet example does not perfectly render the bottom of the example. The footer is shown extending past the bottom of the screen, which does not happen in real life.)
html,body{height: 100%;}
body {display:flex; flex-direction:column;}
.content {flex: 1 0 auto;} /* flex: grow / shrink / flex-basis; */
.footer {flex-shrink: 0;}
/* ---- BELOW IS ONLY for demo ---- */
.footer{background: palegreen;}
<body>
<div class="content">Page Content - height expands to fill space</div>
<footer class="footer">Footer Content</footer>
</body>
Chris also demonstrates this CSS-Grid solution for those who prefer grid.
References:
CSS-Tricks - A Complete Guide to Flexbox
Have a look at http://1linelayouts.glitch.me/, example 4. Una Kravets nails this problem.
This creates a 3 layer page with header, main and footer.
-Your footer will always stay at the bottom, and use space to fit the content;
-Your header will always stay at the top, and use space to fit the content;
-Your main will always use all the available remaining space (remaining fraction of space), enough to fill the screen, if need.
HTML
<div class="parent">
<header class="blue section" contenteditable>Header</header>
<main class="coral section" contenteditable>Main</main>
<footer class="purple section" contenteditable>Footer Content</footer>
</div>
CSS
.parent {
display: grid;
height: 95vh; /* no scroll bars if few content */
grid-template-rows: auto 1fr auto;
}
On my sites I always use:
position: fixed;
...in my CSS for a footer. That anchors it to the bottom of the page.
A quick easy solution by using flex
Give the html and body a height of 100%
html,
body {
width: 100%;
height: 100%;
}
Display the body as flex with column direction:
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
Add flex-grow: 1 for the main
main {
flex-grow: 1;
}
flex-grow specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
*,
*::after,
*::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
footer{
background-color: black;
color: white;
padding: 1rem 0;
display: flex;
justify-content: center;
align-items: center;
}
<body>
<main>
<section >
Hero
</section>
</main>
<footer >
<div>
<p > © Copyright 2021</p>
</div>
</footer>
</body>
For natural header and footer heights use CSS Flexbox.
See JS Fiddle.
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
}
Keeping your <main> as min-height 90vh will solve your problem forever.
Here is the base structure that will help you follow semantics and cover entire page.
Step 1: Keep everything inside the main tag except the header and footer.
<body>
<header>
<!╌ nav, logo ╌>
</header>
<main>
<!╌ section and div ╌>
</main>
<footer>
<!╌ nav, logo ╌>
</footer>
</body>
Step 2: Add min-height: 90vh for main
main{
min-height: 90vh;
}
Usually, header and footer are 70px minimum in height so this case works well, tried and tested!
In styled components of React JS, I have given the width for div in percentage to make it responsive....
But the div is getting margin at right which is making the alignment disturbed.
How to get rid of this margin.
export const BannerHeaderText = styled.h1`
width: 46.5%;
height: 64px;
font-size: 28px;
font-weight: 600;
line-height: 1.14;
`
export const BannerParagraph = styled.p`
width: 51.4%;
height: 40px;
margin-top: 8px;
font-size: 16px;
line-height: 1.5;
color: #000000;
opacity: 0.38;
`
I am getting the width as I needed.
<BannerParagraphBlock>
<BannerHeaderText>
Solveing the most common problems in marketing
</BannerHeaderText>
<BannerParagraph>
Exquisite codially mr happiness of neglected distrusts.
Boisterous impossible unaffected he me everything.
</BannerParagraph>
<SeeAllProductsButton>{message.SayEffectHomePageSeeAllProductsButton.value}</SeeAllProductsButton>
</BannerParagraphBlock>
Missed Data
BannerHeaderText is h1 and BannerParagrap is p
BannerParagraphBlock is section
In the beginning of your CSS code reset your margins for the <div> tag. Then later you can give the margins as required. This is how it looks like,
div{
margin:0;
padding:0;
}
Hopefully this will work!
HTML headings are block-level elements.
From MDN
A block-level element occupies the entire space of its parent element (container), thereby creating a "block."
In your case you can do this to make the heading center-aligned
h1.heading {
margin-right: auto;
margin-left: auto;
}
You can see in the code-snippet below that the heading (in red border) is center-aligned.
h1.heading {
margin-right: auto;
margin-left: auto;
border: 1px solid red;
width: 352px;
}
p {
color: #777;
}
<h1 class="heading">Solving the most common problems in marketting</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Use flex to get the same
below i posted an example
more update of flex FLEX
.wrapper {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
flex-flow: column nowrap;
}
.wrapper h1 {
font-size: 19px;
margin: 10px 0px;
color: #fff;
max-width: 352px;
text-align: center;
}
.wrapper p {
font-size: 14px;
color: #f7f7f7;
max-width: 352px;
text-align: center;
}
.wrapper button {
background: #7C6ECC;
color: #fff;
text-align: center;
margin-top: 10px;
border: none;
font-size: 14px;
}
<div class="wrapper">
<h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, rem, neque rerum nemo nam dolor ea nihil
</p>
<button>
See all products
</button>
</div>
As we all know. h1 is a block-level element, so it will occupy the space of the nearest block-level ancestor. For block-level element, the horizontal direction satisfy the below equation:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
The default margin、 padding is 0, and border-style is none, so border width is also 0. Thus, when you apply a specific width to h1, the equation may not satisfy.
This situation is called "over-constrained" when margin-right is ignored and is calculated so as to make the equation true.
If all of the above have a computed value other than 'auto', the values are
said to be "over-constrained" and one of the used values will have to be
different from its computed value. If the 'direction' property of the
containing block has the value 'ltr', the specified value of 'margin-right'
is ignored and the value is calculated so as to make the equality true. If
the value of 'direction' is 'rtl', this happens to 'margin-left' instead.
So, it h1 is block-level element, there is no way to remove the right-margin;
If you just want to center h1, you can set
h1 {
margin-left: auto;
margin-right: auto;
}
According to the equation above, the margin-left and margin-right will be calculated to same value, so h1 can be centered in this way;
If you want to position h1 anywhere, you can add margin-left or padding-left to arbitrary value to get your purpose;
Or, as you need, you can change h1 from block-level to inline-block, which will really move the right-margin:
h1 {
display: inline-block;
}
<body>
<h1>Hello, title!</h1>
<p>Hello, world!</p>
</body>
I am using a WebGrid in my mvc application. Now I want to fix the height of the WebGrid. For this purpose, I need a VerticalScrollBar for the gridTable contents.
<div class="grid-div" id="webgridid">
#grid.GetHtml(
tableStyle: "gridTable",
headerStyle: "gridHead",
footerStyle: "gridFooter",
columns: new[]
{
grid.Column("name","Name", canSort: true, style: "name"),
grid.Column("description","Description", canSort: true, style: "description"),
grid.Column("duration","Duration", canSort: true, style: "duration"),
})
</div>
This is my div which contains WebGrid. I need vertical scroll bar for only the gridtable part, not for gridHead(Header) and gridFooter (Footer).
I got a solution from here. In that, they are setting the height for the div which contains the webGrid like,
<style type="text/css">
.grid-div {
width: 650px;
height:250px;
overflow-y:auto;
}
</style>
But, here the scroll bar is common for the gridTable as well as its header and footer. So, If I scroll down the scroll bar, then the header and footer also moving along with scroll bar.
Then I tried to set height for gridTable like,
<style type="text/css">
.gridTable {
font-family: Arial;
font-size: 12px;
width: 615px;
max-height: 275px;
overflow-y: auto;
display: block;
border-collapse: collapse;
border: solid 1px #98BF21;
background-color: white;
text-wrap:inherit;
}
</style>
But, Its not creating a vertical scroll bar even its height is greater than 275px. What will be the problem and how to solve it?
Setting a fixed height plus overflow: scroll or overflow: auto should work as expected. However, when you add display: table this will not work because tables ignore the height property, even max-height too, when combined with overflow.
Further reading: Bugzilla Bug 26617 - table ignores height and overflow attributes
The solution would be to remove the display: table property and make it a normal block / display: block;
.grid-div > div {padding:1em;}
.grid-div .gridHead {background:#000; color:#FFF;}
.grid-div .gridFooter {background:lightblue;}
.grid-div .gridTable {
background:#CCC;
height:100px;
display:block;
overflow: auto;
}
<div class="grid-div" id="webgridid">
<div class="gridHead">.gridHead</div>
<div class="gridTable">.gridTable <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quasi assumenda atque, nemo molestias corrupti necessitatibus reiciendis voluptatem aliquid, id eos quam labore quos sunt quis temporibus, nisi architecto esse!</p></div>
<div class="gridFooter">.gridFooter</div>
</div>
jsFiddle: https://jsfiddle.net/k7y29mLx/
I have a problem with div overlaying system using JS and CSS. Actually i want the div to be triggered as soon as a button is clicked, and want to have a kinda exit button in the div itself, so that pressing it the div goes invisible again as it was at first. I here use JS to switch the style, but it works good the first time, but doesn't seem to make div visible the second time.
here is the code
CSS:
#overlay {
position: fixed;
top: 50%;
left: 50%;
width: 300px;
height: 500px;
margin-left: -150px;
margin-top: -100px;
background-color: black;
text-align: center;
opacity:0.8;
display:none;
border-radius:50px;
z-index: 10;
outline: 9999px solid rgba(0,0,0,0.7);
}
And here is the JS code i use to make it visible, but it works only once.
<button onClick="document.getElementById('overlay').style.display='block';" style="color:red;">Notify me when you get online</button><p>
And this makes it vamoose again.
<button onClick="document.getElementById('overlay').style.visibility='hidden';" style="background:black; color:white; border-radius:0px;">[ X ]</button>
In one case You use display and in other visibility.
There is two solutions :
In overlay class add visibility:hidden;, instead display:none; change to block, and to show div use document.getElementById('overlay').style.visibility='visible':
To hide Your div in Your [x] button just use document.getElementById('overlay').style.display='none'; instead visibility:hidden (better option).
Display and visibility are not the same operation. To get your code to work, you will need to use one or the other. The display property is preferable in this case because it causes the div to be removed completely from the flow, instead of just hidden.
To fix your code, change this:
onClick="document.getElementById('overlay').style.visibility='hidden';"
to this:
onClick="document.getElementById('overlay').style.display='none';"
For reference, the opposite of visibility: hidden is visibility: visible, and the opposite of display: none is any other one of the display properties, for instance display: block, display: inline, etc.
That's cause the inverse of display:block; is not visibility:hidden;
but display: none;
so in JS it's like ...display = "none"
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility
P.S: Don't use inline CSS and JS. Keep styling and logic away from templating
Simple Overlay popup example using JS and CSS3
The simplest and most effective way is to use visibility cause than you can animate your #overlay using CSS3
Here's a quite awesome example even with multiple buttons:
function toggleOverlay() {
document.getElementById("overlay").classList.toggle("show");
}
[].forEach.call(document.querySelectorAll(".overlayBtn"), function( el ){
el.addEventListener("click", toggleOverlay);
});
#overlay{
position:fixed;
top:50%;
left:50%;
background:#000;
color:#fff;
text-align:center;
padding:25px;
box-shadow: 0 0 0 2000px rgba(0,0,0,0.7);
transition:0.6s;
transform: translate3d(-50%, -50%, 0) scale(0.7);
visibility:hidden;
opacity:0;
}
#overlay.show{
transform: translate3d(-50%, -50%, 0) scale(1);
visibility:visible;
opacity:1;
}
#overlay .overlayBtn{
cursor:pointer;
font-size:2em;
position:absolute;
top:-2px;
right:5px;
color:#fff;
}
<div id="overlay">
<a class="overlayBtn">×</a>
Hay yo!
</div>
<button class="overlayBtn">Show</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facilis doloremque modi alias eveniet temporibus earum distinctio similique veritatis, ratione reprehenderit architecto voluptatibus soluta possimus minus molestias vitae velit est.</p>
<button class="overlayBtn">Show</button>
<p>Eveniet, ut! Facere repellendus cum minima alias laboriosam pariatur nulla laborum magni adipisci error quo accusantium amet fugit soluta nemo, consectetur, ut asperiores ipsum voluptatum commodi rerum, ab repellat. Alias?</p>
I have a simple 2-column layout with a footer that clears both the right and left div in my markup. My problem is that I can't get the footer to stay at the bottom of the page in all browsers. It works if the content pushes the footer down, but that's not always the case.
To get a sticky footer:
Have a <div> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper place the
<div class="footer"></div>.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
Use CSS vh units!
Probably the most obvious and non-hacky way to go about a sticky footer would be to make use of the new css viewport units.
Take for example the following simple markup:
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
If the header is say 80px high and the footer is 40px high, then we can make our sticky footer with one single rule on the content div:
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
}
Which means: let the height of the content div be at least 100% of the viewport height minus the combined heights of the header and footer.
That's it.
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}
<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>
... and here's how the same code works with lots of content in the content div:
* {
margin:0;
padding:0;
}
header {
background: yellow;
height: 80px;
}
.content {
min-height: calc(100vh - 120px);
/* 80px header + 40px footer = 120px */
background: pink;
}
footer {
height: 40px;
background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
This is my footer
</footer>
NB:
1) The height of the header and footer must be known
2) Old versions of IE (IE8-) and Android (4.4-) don't support viewport units. (caniuse)
3) Once upon a time webkit had a problem with viewport units within a calc rule. This has indeed been fixed (see here) so there's no problem there. However if you're looking to avoid using calc for some reason you can get around that using negative margins and padding with box-sizing -
Like so:
* {
margin:0;padding:0;
}
header {
background: yellow;
height: 80px;
position:relative;
}
.content {
min-height: 100vh;
background: pink;
margin: -80px 0 -40px;
padding: 80px 0 40px;
box-sizing:border-box;
}
footer {
height: 40px;
background: aqua;
}
<header>header goes here</header>
<div class="content">Lorem ipsum
</div>
<footer>
This is my footer
</footer>
Sticky footer with display: flex
Solution inspired by Philip Walton's sticky footer.
Explanation
This solution is valid only for:
Chrome ≥ 21.0
Firefox ≥ 20.0
Internet Explorer ≥ 10
Safari ≥ 6.1
It is based on the flex display, leveraging the flex-grow property, which allows an element to grow in either height or width (when the flow-direction is set to either column or row respectively), to occupy the extra space in the container.
We are going to leverage also the vh unit, where 1vh is defined as:
1/100th of the height of the viewport
Therefore a height of 100vh it's a concise way to tell an element to span the full viewport's height.
This is how you would structure your web page:
----------- body -----------
----------------------------
---------- footer ----------
----------------------------
In order to have the footer stick to the bottom of the page, you want the space between the body and the footer to grow as much as it takes to push the footer at the bottom of the page.
Therefore our layout becomes:
----------- body -----------
----------------------------
---------- spacer ----------
<- This element must grow in height
----------------------------
---------- footer ----------
----------------------------
Implementation
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.spacer {
flex: 1;
}
/* make it visible for the purposes of demo */
.footer {
height: 50px;
background-color: red;
}
<body>
<div class="content">Hello World!</div>
<div class="spacer"></div>
<footer class="footer"></footer>
</body>
You can play with it at the JSFiddle.
Safari quirks
Be aware that Safari has a flawed implementation of the flex-shrink property, which allows items to shrink more than the minimum height that would be required to display the content.
To fix this issue you will have to set the flex-shrink property explicitly to 0 to the .content and the footer in the above example:
.content {
flex-shrink: 0;
}
.footer {
flex-shrink: 0;
}
Alternatively, change the flex style for the spacer element into:
.spacer {
flex: 1 0 auto;
}
This 3-value shorthand style is equivalent to the following full setup:
.spacer {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
Elegantly works everywhere.
You could use position: absolute following to put the footer at the bottom of the page, but then make sure your 2 columns have the appropriate margin-bottom so that they never get occluded by the footer.
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
#content, #sidebar {
margin-bottom: 5em;
}
Here is a solution with jQuery that works like a charm. It checks if the height of the window is greater than the height of the body. If it is, then it changes the margin-top of the footer to compensate. Tested in Firefox, Chrome, Safari and Opera.
$( function () {
var height_diff = $( window ).height() - $( 'body' ).height();
if ( height_diff > 0 ) {
$( '#footer' ).css( 'margin-top', height_diff );
}
});
If your footer already has a margin-top (of 50 pixels, for example) you will need to change the last part for:
css( 'margin-top', height_diff + 50 )
Set the CSS for the #footer to:
position: absolute;
bottom: 0;
You will then need to add a padding or margin to the bottom of your #sidebar and #content to match the height of #footer or when they overlap, the #footer will cover them.
Also, if I remember correctly, IE6 has a problem with the bottom: 0 CSS. You might have to use a JS solution for IE6 (if you care about IE6 that is).
A similar solution to #gcedo but without the need of adding an intermediate content in order to push the footer down. We can simply add margin-top:auto to the footer and it will be pushed to the bottom of the page regardless his height or the height of the content above.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
.content {
padding: 50px;
background: red;
}
.footer {
margin-top: auto;
padding:10px;
background: green;
}
<div class="content">
some content here
</div>
<footer class="footer">
some content
</footer>
Just invented a very simple solution that worked great for me. You just wrap all page content except for the footer within in a div, and then set the min-height to 100% of the viewpoint minus the height of the footer. No need for absolute positioning on the footer or multiple wrapper divs.
.page-body {min-height: calc(100vh - 400px);} /*Replace 400px with your footer height*/
I have myself struggled with this sometimes and I always found that the solution with all those div's within each other was a messy solution.
I just messed around with it a bit, and I personally found out that this works and it certainly is one of the simplest ways:
html {
position: relative;
}
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
}
What I like about this is that no extra HTML needs to be applied. You can simply add this CSS and then write your HTML as whenever
Since the Grid solution hasn't been presented yet, here it is, with just two declarations for the parent element, if we take the height: 100% and margin: 0 for granted:
html, body {height: 100%}
body {
display: grid; /* generates a block-level grid */
align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
margin: 0;
}
.content {
background: lightgreen;
/* demo / for default snippet window */
height: 1em;
animation: height 2.5s linear alternate infinite;
}
footer {background: lightblue}
#keyframes height {to {height: 250px}}
<div class="content">Content</div>
<footer>Footer</footer>
align-content: space-between
The items are evenly distributed within the alignment container along
the cross axis. The spacing between each pair of adjacent items is the
same. The first item is flush with the main-start edge, and the last
item is flush with the main-end edge.
CSS :
#container{
width: 100%;
height: 100vh;
}
#container.footer{
float:left;
width:100%;
height:20vh;
margin-top:80vh;
background-color:red;
}
HTML:
<div id="container">
<div class="footer">
</div>
</div>
This should do the trick if you are looking for a responsive footer aligned at the bottom of the page,which always keeps a top-margin of 80% of the viewport height.
For this question many of the answers I have seen are clunky, hard to implement and inefficient so I thought I'd take a shot at it and come up with my own solution which is just a tiny bit of css and html
html,
body {
height: 100%;
margin: 0;
}
.body {
min-height: calc(100% - 2rem);
width: 100%;
background-color: grey;
}
.footer {
height: 2rem;
width: 100%;
background-color: yellow;
}
<body>
<div class="body">test as body</div>
<div class="footer">test as footer</div>
</body>
this works by setting the height of the footer and then using css calc to work out the minimum height the page can be with the footer still at the bottom, hope this helps some people :)
Use absolute positioning and z-index to create a sticky footer div at any resolution using the following steps:
Create a footer div with position: absolute; bottom: 0; and the desired height
Set the padding of the footer to add whitespace between the content bottom and the window bottom
Create a container div that wraps the body content with position: relative; min-height: 100%;
Add bottom padding to the main content div that is equal to the height plus padding of the footer
Set the z-index of the footer greater than the container div if the footer is clipped
Here is an example:
<!doctype html>
<html>
<head>
<title>Sticky Footer</title>
<meta charset="utf-8">
<style>
.wrapper { position: relative; min-height: 100%; }
.footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
.column { height: 2000px; padding-bottom: 300px; background-color: grxqeen; }
/* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */
</style>
</head>
<body>
<div class="wrapper">
<div class="column">
<span>hello</span>
</div>
<div class="footer">
<p>This is a test. This is only a test...</p>
</div>
</div>
</body>
</html>
One solution would be to set the min-height for the boxes. Unfortunately it seems that it's not well supported by IE (surprise).
None of these pure css solutions work properly with dynamically resizing content (at least on firefox and Safari) e.g., if you have a background set on the container div, the page and then resize (adding a few rows) table inside the div, the table can stick out of the bottom of the styled area, i.e., you can have half the table in white on black theme and half the table complete white because both the font-color and background color is white. It's basically unfixable with themeroller pages.
Nested div multi-column layout is an ugly hack and the 100% min-height body/container div for sticking footer is an uglier hack.
The only none-script solution that works on all the browsers I've tried: a much simpler/shorter table with thead (for header)/tfoot (for footer)/tbody (td's for any number of columns) and 100% height. But this have perceived semantic and SEO disadvantages (tfoot must appear before tbody. ARIA roles may help decent search engines though).
Multiple people have put the answer to this simple problem up here, but I have one thing to add, considering how frustrated I was until I figured out what I was doing wrong.
As mentioned the most straightforward way to do this is like so..
html {
position: relative;
min-height: 100%;
}
body {
background-color: transparent;
position: static;
height: 100%;
margin-bottom: 30px;
}
.site-footer {
position: absolute;
height: 30px;
bottom: 0px;
left: 0px;
right: 0px;
}
However the property not mentioned in posts, presumably because it is usually default, is the position: static on the body tag. Position relative will not work!
My wordpress theme had overridden the default body display and it confused me for an obnoxiously long time.
An old thread I know, but if you are looking for a responsive solution, this jQuery addition will help:
$(window).on('resize',sticky);
$(document).bind("ready", function() {
sticky();
});
function sticky() {
var fh = $("footer").outerHeight();
$("#push").css({'height': fh});
$("#wrapper").css({'margin-bottom': -fh});
}
Full guide can be found here: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/
I have created a very simple library https://github.com/ravinderpayal/FooterJS
It is very simple in use. After including library, just call this line of code.
footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));
Footers can be dynamically changed by recalling above function with different parameter/id.
footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));
Note:- You haven't to alter or add any CSS. Library is dynamic which implies that even if screen is resized after loading page it will reset the position of footer. I have created this library, because CSS solves the problem for a while but when size of display changes significantly,from desktop to tablet or vice versa, they either overlap the content or they no longer remains sticky.
Another solution is CSS Media Queries, but you have to manually write different CSS styles for different size of screens while this library does its work automatically and is supported by all basic JavaScript supporting browser.
Edit
CSS solution:
#media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
/* For mobile phones: */
#footer {
width: 100%;
position:fixed;
bottom:0;
}
}
Now, if the height of display is more than your content length, we will make footer fixed to bottom and if not, it will automatically appear in very end of display as you need to scroll to view this.
And, it seems a better solution than JavaScript/library one.
I wasn't having any luck with the solutions suggested on this page before but then finally, this little trick worked. I'll include it as another possible solution.
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
For me the nicest way of displaying it (the footer) is sticking to the bottom but not covering content all the time:
#my_footer {
position: static
fixed; bottom: 0
}
jQuery CROSS BROWSER CUSTOM PLUGIN - $.footerBottom()
Or use jQuery like I do, and set your footer height to auto or to fix, whatever you like, it will work anyway. this plugin uses jQuery selectors so to make it work, you will have to include the jQuery library to your file.
Here is how you run the plugin. Import jQuery, copy the code of this custom jQuery plugin and import it after importing jQuery! It is very simple and basic, but important.
When you do it, all you have to do is run this code:
$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer"
// by setting target to {target:"div.footer"}
there is no need to place it inside the document ready event. It will run well as it is. It will recalculate the position of your footer when the page is loaded and when the window get resized.
Here is the code of the plugin which you do not have to understand. Just know how to implement it. It does the job for you. However, if you like to know how it works, just look through the code. I left comments for you.
//import jQuery library before this script
// Import jQuery library before this script
// Our custom jQuery Plugin
(function($) {
$.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
var defaults = {
target: "footer",
container: "html",
innercontainer: "body",
css: {
footer: {
position: "absolute",
left: 0,
bottom: 0,
},
html: {
position: "relative",
minHeight: "100%"
}
}
};
options = $.extend(defaults, options);
// JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
$(options.target).css({
"position": options.css.footer.position,
"left": options.css.footer.left,
"bottom": options.css.footer.bottom,
});
$(options.container).css({
"position": options.css.html.position,
"min-height": options.css.html.minHeight,
});
function logic() {
var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
$(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
$(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
};
// DEFINE WHEN TO RUN FUNCTION
$(window).on('load resize', function() { // Run on page loaded and on window resized
logic();
});
// RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
// return this.each(function() {
// this.checked = true;
// });
// return this;
};
})(jQuery); // End of plugin
// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5
/* Set your footer CSS to what ever you like it will work anyway */
footer {
box-sizing: border-box;
height: auto;
width: 100%;
padding: 30px 0;
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
<div class="content">
<header>
<nav>
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</nav>
</header>
<section>
<p></p>
<p>Lorem ipsum...</p>
</section>
</div>
<footer>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
<p>Copyright 2009 Your name</p>
</footer>
The flex solutions worked for me as far as making the footer sticky, but unfortunately changing the body to use flex layout made some of our page layouts change, and not for the better. What finally worked for me was:
jQuery(document).ready(function() {
var fht = jQuery('footer').outerHeight(true);
jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");
});
I got this from ctf0's response at https://css-tricks.com/couple-takes-sticky-footer/
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
border: 3px solid #73AD21;
}
<body style="height:1500px">
<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed;
</div>
</body>
If you don't want it using position fixed, and following you annoyingly on mobile, this seems to be working for me so far.
html {
min-height: 100%;
position: relative;
}
#site-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 6px 2px;
background: #32383e;
}
Just set the html to min-height: 100%; and position: relative;, then position: absolute; bottom: 0; left: 0; on the footer. I then made sure the footer was the last element in the body.
Let me know if this doesn't work for anyone else, and why. I know these tedious style hacks can behave strangely among various circumstances I'd not thought of.
REACT-friendly solution - (no spacer div required)
Chris Coyier (the venerable CSS-Tricks website) has kept his page on the Sticky-Footer up-to-date, with at least FIVE methods now for creating a sticky footer, including using FlexBox and CSS-Grid.
Why is this important? Because, for me, the earlier/older methods I used for years did not work with React - I had to use Chris' flexbox solution - which was easy and worked.
Below is his CSS-Tricks flexbox Sticky Footer - just look at the code below, it cannot possibly be simpler.
(The (below) StackSnippet example does not perfectly render the bottom of the example. The footer is shown extending past the bottom of the screen, which does not happen in real life.)
html,body{height: 100%;}
body {display:flex; flex-direction:column;}
.content {flex: 1 0 auto;} /* flex: grow / shrink / flex-basis; */
.footer {flex-shrink: 0;}
/* ---- BELOW IS ONLY for demo ---- */
.footer{background: palegreen;}
<body>
<div class="content">Page Content - height expands to fill space</div>
<footer class="footer">Footer Content</footer>
</body>
Chris also demonstrates this CSS-Grid solution for those who prefer grid.
References:
CSS-Tricks - A Complete Guide to Flexbox
Have a look at http://1linelayouts.glitch.me/, example 4. Una Kravets nails this problem.
This creates a 3 layer page with header, main and footer.
-Your footer will always stay at the bottom, and use space to fit the content;
-Your header will always stay at the top, and use space to fit the content;
-Your main will always use all the available remaining space (remaining fraction of space), enough to fill the screen, if need.
HTML
<div class="parent">
<header class="blue section" contenteditable>Header</header>
<main class="coral section" contenteditable>Main</main>
<footer class="purple section" contenteditable>Footer Content</footer>
</div>
CSS
.parent {
display: grid;
height: 95vh; /* no scroll bars if few content */
grid-template-rows: auto 1fr auto;
}
On my sites I always use:
position: fixed;
...in my CSS for a footer. That anchors it to the bottom of the page.
A quick easy solution by using flex
Give the html and body a height of 100%
html,
body {
width: 100%;
height: 100%;
}
Display the body as flex with column direction:
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
Add flex-grow: 1 for the main
main {
flex-grow: 1;
}
flex-grow specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor).
*,
*::after,
*::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
footer{
background-color: black;
color: white;
padding: 1rem 0;
display: flex;
justify-content: center;
align-items: center;
}
<body>
<main>
<section >
Hero
</section>
</main>
<footer >
<div>
<p > © Copyright 2021</p>
</div>
</footer>
</body>
For natural header and footer heights use CSS Flexbox.
See JS Fiddle.
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html {
height: 100%;
}
body {
height: 100%;
min-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
flex-shrink: 0;
}
header,
footer {
flex: none;
}
Keeping your <main> as min-height 90vh will solve your problem forever.
Here is the base structure that will help you follow semantics and cover entire page.
Step 1: Keep everything inside the main tag except the header and footer.
<body>
<header>
<!╌ nav, logo ╌>
</header>
<main>
<!╌ section and div ╌>
</main>
<footer>
<!╌ nav, logo ╌>
</footer>
</body>
Step 2: Add min-height: 90vh for main
main{
min-height: 90vh;
}
Usually, header and footer are 70px minimum in height so this case works well, tried and tested!