I've tried the following for my site-footer to stay at the bottom of one page only. (On all other pages, it works as planned but not on one, why is that?)
This is what I am using and although it works, it doesn't work across all mobiles/tablet devices.
help?
I was not exploring your queries, but nowadays you can achieve sticky footer with following markup:
<div class="page-wrapper">
<header>Hi! I'm Header!</header>
<main>And I'm Main content section! Let's rock!</main>
<footer>Hi! I'm Footer!</footer>
</div>
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
min-height: 100vh;
width: 100%;
}
header,
footer {
height: 50px;
}
main {
flex: 1;
}
See the fiddle over here
I have used this method in the past and it works perfectly.
HTML:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Related
I know this is a duplicate question, I've read through many questions on this particular question like this one.
But I can't for the life of me get mine to work. I've tried many combinations of height and min-height for my html and body, using both % and vh. I tried setting the margin to 0 as well but that doesn't help. I tried this on both Chrome and Firefox, neither browser works. There were some answers that suggested using position: absolute but that messes up the styling for all the content I have.
Some combos I tried:
html, body{
height: 100%;
min-height: 100%;
}
html{
height: 100%;
}
body {
min-height: 100%;
}
html{
height: 100%;
margin: 0;
}
body {
margin: 0;
min-height: 100%;
}
My HTML layout:
<html>
<head>
... stuff
</head>
<body class=".container">
... stuff
</body>
</html>
You can use a fixed position for the bottom, but that can leave you with display problems as content gets covered.
I recommend using something like
body {
height: calc(100vh - 100px);
}
if you want to leave 100 px for your header and footer
What you're looking for is position: fixed, which tells the element to be fixed to that location, regardless of the other content. Couple this with bottom: 0, to state that the element should be fixed to the bottom of the page:
body {
margin: 0;
}
div {
padding: 5px;
}
.container {
background: #DDD;
height: 50px;
}
.footer {
position: fixed;
bottom: 0px;
height: 20px;
width: 100%;
background: #DDD;
}
<body>
<div class="container">Text</div>
<div class="footer">Copyright</div>
</body>
Hope this helps! :)
Solution :You can use the html 5 elements like
Header,
Article,
Section,
Footer
And set there height and width according to your requirements...
you can use this code to create a fixed footer at the bottom of your page
.yourfooterclass {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
basically what this is doing is positioning the footer at the very bottom of the page, so it doesnt matter how much content you have on the page it will always be at the bottomn
Since I couldn't change anything on the height-property of the body, I found this solution at https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/1, also pure CSS:
The html structure:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
</div>
<footer id="footer"></footer>
</div>
</body>
</html>
And the CSS accordingly:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* Footer height */
}
My code
.bid-toolbar {
background:#FFCD2F !important;
height:70px !important;
position: fixed;
bottom: 0;
I want to make the yellow toolbar stick to the bottom. I have tried a few times to make this toolbar to the bottom, but whenever I make it
fixed
, it goes up as I scroll the page down as you can see in the image below.
Using position: fixed often causes problems in mobile browsers. You can use display:flex in combination with overflow:auto to get a fixed footer without using fixed postioning:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.Row {
flex: 0 0 auto;
}
.Row.Expand {
overflow: auto;
flex: 1 1 auto;
}
</style>
</head>
<body>
<div class="Frame">
<div class="Row Expand"><h2>Awesome content</h2></div>
<div class="Row"><h3>Sticky footer</h3></div>
</div>
</body>
</html>
A working example: https://jsfiddle.net/9L2reymy/2/
This is the original answer, which hides the footer if the content is bigger than the screen height:
I wrote an article in my blog about fixed footers and implemented them with display:table instead. Here is the relevant code in a simple example:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body>
<div class="Frame">
<div class="Row Expand"><h2>Awesome content</h2></div>
<div class="Row"><h3>Sticky footer</h3></div>
</div>
</body>
</html>
Instead of position:fixed make it absolute property of position like
position:absolute;
position:absoulute; left:0px; bottom:0px; z-index:999;
You can try adding:
-webkit-transform: translateZ(0);
Or this was actually just the device/browser issues.
You can use jQuery to keep the bid toolbar bottom try the this code and note I used an ID #bid_toolBar you can change it to class if you want to.
$(document).ready( function() {
var bid_toolBarHeight = 0,
bid_toolBarTop = 0,
$bid_toolBar = $("#bid_toolBar");
positionbid_toolBar();
function positionbid_toolBar() {
bid_toolBarHeight = $bid_toolBar.height();
bid_toolBarTop = ($(window).scrollTop()+$(window).height()-bid_toolBarHeight)+"px";
if ( ($(document.body).height()+bid_toolBarHeight) < $(window).height()) {
$bid_toolBar.css({
position: "absolute"
}).animate({
top: bid_toolBarTop
})
} else {
$bid_toolBar.css({
position: "static"
})
}
}
$(window)
.scroll(positionbid_toolBar)
.resize(positionbid_toolBar)
});
Here is my code to stick the footer to bottom of the page:
#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}
When I'm doing it with height it works perfectly fine, but when I'm trying to set the minimum height it leaves a little space under the footer. Any guess how to fix that?
First of all, the height of body, html and container (see element with class 'container') has to have height: 100%;
In this solution I have used flex box. It is supported by all modern browsers and IE11.
It's necessary to add the following properties to container:
display: flex;
flex-direction: column; /*the flex items are placed in column, by default it is in row*/
To move footer to bottom, just add to flex item
margin-top: auto; /* it grabs all free space between flex items and put it before this flex item */
html, body {
height: 100%;
}
.container {
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
.header {
height: 20%;
background-color: yellow;
}
.content {
background-color: white;
}
.footer {
min-height: 20%;
background-color: blue;
margin-top: auto;
}
<div class="container">
<div class="header">Header</div>
<div class="content">It's content</div>
<div class="footer">Footer in bottom</div>
</div>
What about using Flexbox? It is supported by IE>=10.
To use that, you have to split your page at least in two separated elements: The "upper"-one (.content) with the whole content of your page and the footer.
The "upper"-one gets the value flex: 1, which is a shorthand for:
flex-grow: 1
flex-shrink: 1
flex-basis: auto
This means, that the "upper"-element could grow to the maximum, while the footer reserves only it's actually required space.
Code snippet
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="content"></div>
<footer class="footer">
Hey footer!
</footer>
</body>
</html>
You used min height 35 px. I think your content's height inside of footer is more than 35px. So check the margin or padding of all footer elements.
It will be better, if you can make a jsfiddle demo.
[SOLVED]
I found this to be working for my example:
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
Over the years I've tried lot of different techniques, but I still can't find a way, where I could create a footer, that is dynamically changes height, depending on the content and if the site have less content, the footer goes down to the bottom of the page.
I've tried to play with the ::after pseudo element:
footer::after {
content: '';
position: absolute;
background: red; //just test
width: 100%;
height: 99px;
}
And I found a way, where you can do this to look nice, but you need to set the height of the footer. But if you want a real responsive UI, you can not set the height of the footer :)
I hope anyone knows the secret, how to create a dynamic footer.
What you want is sticky footer with fluid height.
In older browsers you'll need some JavaScript.
In modern browser you can use css table display types:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
</body>
</html>
I took this example from:
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
EDIT: Now I see you want to expand the footer, not the content. I'm leaving the original for bypassers with sticky footer question as it is more common version.
Try this version instead:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
</style>
</head>
<body class="Frame">
<header class="Row"><h1>Catchy header</h1></header>
<!-- these two line differ from the previous example -->
<section class="Row"><h2>Awesome content</h2></section>
<footer class="Row Expand"><h3>Sticky footer</h3></footer>
</body>
</html>
This can easily be done with CSS2.1 (but not in IE7-). The main trick is the following:
.container {
display: table;
height: 100%;
width: 100% /* mimics `display: block` */
}
.footer {
display: table-footer-group;
}
/* to add padding use the below or wrapper/inner wrapping element combo. */
.footer:before, .footer:after {
padding: 1em;
content: '';
}
In modern browsers, it can also be done with FlexBox, which is probably more appropriate theoretically, but less supported yet.
It is sticky footer, please try this:
HTML
<div id="container">
<div id="header">Header Section</div>
<div id="page" class="clearfix">
<div id="left">Left Sidebar</div>
<div id="content">Main content</div>
<div id="right">Right sidebar</div>
</div>
<div id="footer">Footer Section</div>
</div>
CSS
/*sticky footer style*/
html,body {
margin: 0;
padding:0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
height: 100%; /*for ie6*/
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#page {
width: 960px;
margin: 0 auto;
padding-bottom: 60px;/* equal to the footer's height*/
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;/*The footer' height*/
background: #6cf;
clear:both;
}
/*=======主体内容部分=======*/
#left {
width: 220px;
float: left;
margin-right: 20px;
background: lime;
}
#content {
background: orange;
float: left;
width: 480px;
margin-right: 20px;
}
#right{
background: green;
float: right;
width: 220px;
}
Pleas view the demo. Other methods, you can click here.
And you can use the CSS3 flexbox Module, Like this:
HTML
<header class="Row"><h1>Catchy header</h1></header>
<section class="Row Expand"><h2>Awesome content</h2></section>
<footer class="Row"><h3>Sticky footer</h3></footer>
CSS
header,section,footer {
display: block;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
body {
width: 100%;
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
section {
-moz-box-flex:1;
-webkit-box-flex:1;
-ms-flex:1;
-webkit-flex:1;
flex:1;
background: hsla(250,20%,30%,0.9);
}
header {
background: orange;
}
footer {
background: green;
}
Please view the demo. About the css3 flexbox module.
I'm trying to make some decoration outside the main content div,
that would be getting hidden if the window size is small.
I thought for a while and came up with the following markup, (you can copy paste and see it),
and that's best I could think of right now. The problem however is that because I used percentage margins, the decoration gets unstable and shaky while resizing, and sometimes is even stepping on the content div.
Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
background-color: yellow;
}
div.content {
display: block;
width: 958px;
height: 400px;
background-color: #CCC;
margin: 0px auto;
}
div.wrap {
margin: 0px auto;
min-width: 958px;
max-width: 1058px;
overflow: hidden;
position: relative;
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
div.left, div.right {
background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg);
width: 50px;
display: block;
height: 50px;
bottom: 0px;
position: absolute;
}
div.left {
right: 479px;
margin-right: 50%;
}
div.right {
left: 479px;
margin-left: 50%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
<div class="content">
<-- Content
</div>
</div>
</body>
</html>
So, could you recommend guys for some other way around without using percentage margins, to make it more flexible..? Thanks!
EDIT:
This is what happens in Google Chrome on resize:
As the browser has to re-calculate the margins based on the parent's width changes, this is kind of expected behaviour.
If you want to keep content centralized on the screen without playing with max-width, min-width and margins as percentage, and there won't be any element that should be affected by the .wrap position in the document flow, you could do something like this:
div.wrap {
width: 1058px;
overflow: hidden;
position: absolute;
left: 50%;
top: 0;
margin-left: -529px; /* 1058/2 * -1 */
background-image: url(http://www.ephotobay.com/image/ooo-ml.png);
background-position: center;
}
This will centralize the content horizontally in every situation.
Hope it helps.
Clear your floats:
<div>
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<style>
.clear{clear:both;}
</style>