am making a website, and have a wrapper on the footer, i want the footer as sticky footer, but when i minimise the screen and make it smaller the footer overtakes the content and header.
#footerWrapper {
height: 177px;
bottom: 0;
position: absolute;
width: 100%;
}
This does what i want as it makes the footer go to the bottom of the page regardless of what size the screen is. however when i minimise the screen and move it up it stays absolute hence staying in that 1 page.
as i would want it to stay on the page rather than the footer being absolute.
any ideas.
I'm using this, and it works fine, on mobiles too ...
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}
source:
http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
demo:
http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/
I was able to keep the footer sticky and not overtake the header by using z-index. Just give the higher DIVs higher z-indexes.
#headWrapper {
padding-bottom: 0px;
position: relative;
}
#headWrapper {
z-index: 2;
height: 160px;
/* width: 960px; */
margin: 0 auto;
background: url(/images/PageImages/homeHeadBack.png) repeat-x;
}
#footerWrapper {
background: url(/images/PageImages/footerBack.png) repeat-x;
height: 177px;
position: absolute;
width: 100%;
bottom: 0;
z-index: 1;
}
Please note that #headWrapper needs to specify position:relative.
I think you may start from this. Worked on Chrome.
Try this
#footerWrapper{
position: fixed;
}
#contentWrapper{
margin-bottom: 177px; // height of the footer
}
Alright, I'm not positive but I think I understand what you're trying to accomplish
#footerWrapper {
background: url(/images/PageImages/footerBack.png) repeat-x;
height: 177px;
position: fixed;
width: 100%;
bottom: 0px;
}
#contentWrapper {
background: url(/images/PageImages/contentTopBack.png) no-repeat center top;
min-height: 208px;
margin-bottom: 177px;
}
If that doesn't fix it than I don't understand what you're aiming for.
try this one.
HTML:
<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) 2014</p>
</div>
</body>
</html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
for more information.
Related
I have readed alot and still didn't position my footer proper. I am trying to position my footer to stay at the bottom of the page and be visible only when I scroll to the bottom.
I have added the folowing classes to the page:
<div class="wrap">
<!-- Holds all the page content inside -->
<div class="spacer"></div>
</div>
<div class="footer">
.....
</div>
I have added the folowing css to the classes:
.wrap {
min-height: 100%;
margin-bottom: -100px;
padding:5%;
}
/* Set the fixed height of the footer here */
.footer {
position: relative;
background-color: #222;
z-index: 1;
}
.spacer, #footer {
height: 100px;
}
What am I doing wrong and preventing the footer to stay always at the bottom?
Position your footer as absolute and add bottom: 0 to your footer class.
.footer {
...
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
More elegant solution would be like this
html, body{
margin: 0;padding:0;
}
.fake-body{
height: 200px;
overflow: auto;
}
.wrap {
position:relative;
}
/* Set the fixed height of the footer here */
.footer {
position: absolute;
background-color: #222;
z-index: 1;
bottom:0;
left:0;
right:0;
color:white;
}
.spacer, #footer {
height: 300px;
}
<div class="fake-body">
<div class="wrap">
<div class="spacer">spacer</div>
<div class="footer">footer</div>
</div>
</div>
Add this to the footer class
position: relative;
bottom: 0;
margin: 20px 0 0 0;
width: 100%;
This will keep the footer to the bottom
<div class="footer">
Your content
</div>
I am developing a site where I have a fixed header and a fixed footer. I am trying to get my content to be full page when there is not enough content and still be scrollable when there is.
What I have so far does this, but I am left with some extra space at the end of my page. How can I get rid of this extra space at the bottom?
Here is a jsFiddle: http://jsfiddle.net/0yz9nx35/1/
As you can see in the fiddle there is still a scrollbar showing empty space at the bottom of my page
My code:
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
CSS:
html { height: 100%; margin: 0px; padding: 0px; }
body { height: 100%; margin: 0px; padding: 0px;}
.wrapper { min-height: 100%; height: 100%; padding-top: 60px; }
.header { position: fixed; top:0px; left:0px; height:60px; background-color: #333; width: 100%;}
.footer { position: fixed; bottom:0px; left:0px; height:50px; background-color: #333; width: 100%;}
You can use that on the wrapper class:
height: calc(100% - 60px)
Or maybe you could change the structure of your page by something like:
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#global { height: 100vh; }
#header { height: 60px; background-color: orange; }
#content { height: calc(100% - (60px + 50px)); background-color: gray; }
#footer { height: 50px; background-color: green; }
</style>
</head>
<body>
<div id="global">
<div id="header">
Aenean
</div>
<div id="content">
lacinia
</div>
<div id="footer">
quam
</div>
</div>
</body>
</html>
Remove the body {height:100%;} add some padding bottom on wrapper to compensate for the fixed footer height. Here is the fixed fiddle:
http://jsfiddle.net/0yz9nx35/9/
you can add overflow-y: hidden; do remove the scrollbar at the bottom.
If you want any scroll bar to be on the .content block, you can try the following.
You can make .content fixed such that the top and bottom edges are below the header and above the footer respectively.
In this approach, you may not need the .wrapper block element unless you need it for placing some background images, for example.
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
.wrapper {
height: 100%;
}
.header {
position: fixed;
top: 0px;
left: 0px;
height: 60px;
background-color: #333;
width: 100%;
}
.footer {
position: fixed;
bottom: 0px;
left: 0px;
height: 50px;
background-color: #333;
width: 100%;
}
.content {
position: fixed;
top: 60px;
bottom: 50px;
left: 0px;
background-color: beige;
width: 100%;
overflow: auto;
}
<div class="wrapper">
<div class="header"></div>
<div class="content">
Content goes here<br>
and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>
the end.
</div>
<div class="footer"></div>
</div>
I came across a minor glitch on firefox. I am trying to position my footer on the bottom of the page. I have found a sticky footer example here: http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/
I have adapted the solution there to fit my application.
Here is the code:
CSS
.footer {
height: 80px;
position: absolute;
text-align: center;
bottom: 0;
}
#wrapper {
min-height: 100%;
position: relative;
}
.content-custom {
padding-bottom: 80px;
}
HTML
<div id="wrapper" class="container">
<div>Header</div>
<div class="content-custom">Content</div>
<div class="footer">Footer</div>
</div>
I am including some pages in each section. The trouble I encounter is with the footer. It is working fine in IE and Chrome, but in firefox, the position:absolute is of no use (the footer doesn't stick to the bottom of the page).
I have tried various solutions such as adding the following CSS:
body {
position: relative
}
or using
.footer {
height: 80px;
position: absolute;
text-align: center;
bottom: 0;
min-height: 80px; /* adding this as a property */
}
but with no success.
Most of the answers I've found provided solutions for users who encountered this problem while using tables, but this is not my case.
Does anyone have an idea of a possible solution ?
Thanks.
So, after adapting the solution provided by Muthukumar, this is the final code that got it working for me:
HTML
<div id="wrapper" class="container">
<div>Header</div>
<div class="content-custom">Content</div>
<div class="footer">Footer</div>
</div>
CSS
.footer {
height: 40px;
position: absolute;
text-align: center;
bottom: 0;
}
.content-custom {
padding-bottom: 40px;
}
html {
position: relative;
min-height: 100%;
}
body {
height:100%;
padding-bottom:40px;
}
Make sure the body and html tags height is 100%, I am also strucked this problem and i found the solution.
<!DOCTYPE html> <!-- Dont forget to add this -->
<html>
<body>
<div id="wrapper" class="container">
<div>Header</div>
<div class="content-custom">Content</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
*{
padding:0px;
margin:0px;
}
html {
position: relative;
min-height: 100%;
}
body{
height:100%;
padding-bottom:80px;
}
.footer {
height: 80px;
position: absolute;
text-align: center;
bottom: 0;
width:100%
}
.container{
display:block;
}
try this
.footer {
position:fixed;
bottom: 0px;
height:80px;
}
Try this fiddle
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
}
#content {
padding-bottom:80px;
}
thanks for helping out. I have a site with a container div that I'd like to stretch to the bottom of the page. Using position: fixed I'm able to achieve this, but the footer text on the bottom is cutoff and you are unable to scroll down.
Using position: relative I'm able to scroll, but the container div does not stretch to the bottom of the page.
My code is as follows:
.container {
position: relative;
bottom: 0;
top: 0;
left: 50%;
margin-left: -480px;
width: 960px;
height: auto;
background-color: #1b1a1a;
}
.body {
width: 703px;
min-height: 340px;
margin: auto;
background-color: #f2f2f2;
padding: 20px;
overflow: hidden;
}
<div class="container">
<div class="header"></div>
<div class="body">
content content content
</div>
<div class="footer"></div>
</div>
Is this what you are looking for?
http://jsfiddle.net/gespinha/jrsxN/7/
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
.container {
width:100%;
height:100%;
position: absolute;
background-color: #1b1a1a;
}
.body {
background-color: #f2f2f2;
padding: 20px 20px 120px;
}
.footer {
width:100%;
height:100px;
position:fixed;
bottom:0;
background:#f00;
}
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="inner-wrap">
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOTTER
</div>
</div> </body>
AND CSS:
html { height:100%; max-height:100%; }
body {
margin:0;
padding:0;
height:100%;
max-height: 100%;
}
#wrap {
min-height:100%;
height: 100%;
position:relative;
}
* html #wrap { height:100% }
#inner-wrap {
padding-bottom:50px;
min-height: 100%;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
* html #inner-wrap {
height:100%;
}
#header
{
width: 100%;
background-color: #C0C0C0;
height: 16px;
color: White;
text-align: center;
position: relative;
top:0px;
}
#footer
{
width: 100%;
background-color: #C0C0C0;
height: 50px;
position:absolute;
bottom: 0;
color: White;
text-align: center;
}
#content
{
width: 1000px;
height: 100%;
background-color: #F5FDEC;
margin: 0 auto 0 auto;
}
The Problem:
How i can make this: HEADER top 16px,
CONTENT dynamic 100% height,
FOOTER at end of page
If i give 100% to inner-wrap DIV, them after footer is white space.
Thx
You have too many heights going on:
Remove the min-height and max-height values from your selectors.
Remove the position: absolute; from your #wrap div.
I made an example for you here.
For the footer positioned at the bottom in a fixed position that doesn't move when you scroll the webpage use this:
#footer{
position:fixed;
clear:both;
}