I am trying to get a sticky footer at the bottom of the page with a solid header at the top of the page. But I am having some difficulties with the body and html class.. My header is 100px in height from the top of the page, my html and body classes are 100% in height and my footer is 150px. I have correctly written the footer in my page so it sticks to the bottom, but the 100% height of the html or body is placing it even further down my page so that you would have to scroll to see the footer even though there is no text pushing it that far down! Here is my CSS code:
html {
height:100%;
background: url(pics/bg.png) no-repeat top center fixed;
margin:0;
padding:0;
}
body {
height:100%;
margin:0;
padding:0;
}
.wrapper {
min-height:100%;
}
.header {
position:fixed;
background:#FFF url(pics/header.png) no-repeat top center fixed;
top:0;
height:100px;
width:1920px;
z-index:1000;
}
.main {
position:absolute;
top:100px;
width:990px;
left:0;
right:0;
overflow:auto;
margin:0 auto;
padding-bottom:150px; /* must be same height as the footer */
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
.footer {
position:relative;
background-image:url(pics/bg_footer.png);
margin-top:-150px; /* negative value of footer height */
height:150px;
width:990px;
margin:0 auto;
clear:both;
}
And here is my HTML code:
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="main">
<p>I can write here</p>
</div>
</div>
<div class="footer">
<p class="alignleft">© Tim</p>
<p class="alignright">17 maart 2013</p>
</div>
</body>
I am almost certain it has something to do with the html height of 100%.. Thanks in advance for your help!
Can you try this:
<body>
<div class="header"></div>
<div class="main">
<p>I can write here</p>
</div>
<div class="footer">
<p class="alignleft">© Tim</p>
<p class="alignright">17 maart 2013</p>
</div>
</body>
Does this suits your needs?
CSS
html {
height:100%;
background: url(pics/bg.png) no-repeat top center fixed;
margin:0;
padding:0;
}
body {
padding:0;
margin:0;
}
.header {
background:#FFF url(pics/header.png) no-repeat top center fixed;
height:100px;
width:100%;
}
.main {
position:absolute;
top:100px;
bottom:150px;
overflow:auto;
margin:0 auto;
width:100%;
padding-bottom:10px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
.footer {
position: absolute;
width: 100%;
bottom:0;
background-image:url(pics/bg_footer.png);
height:150px;
width:100%;
margin:0 auto;
clear:both;
}
Check JSFiddle example:
http://jsfiddle.net/2SL7c/
How about letting footer be fixed as well? I've made this jsFiddle, take a look. I changed your divs to IDs instead of classes (as they are unique and should only appear once).
#footer {
position:fixed;
bottom: 0;
background-image:url(pics/bg_footer.png);
background-color:#FF0;
height:150px;
width: 100%;
}
I made a javascript function for resolve this
<script type="text/javascript">
$(window).bind("load", function () {
var distance = 20;
var header = $("#header");
var posContent = header.position().top;
posContent = posContent + header.height() + distance;
var content = $("#content");
content.css({ 'top': posContent + 'px' });
var posFooter = content.position().top;
posFooter = posFooter + content.height() + 200;
var footer = $("#footer");
footer.css({ 'top': posFooter + 'px' });
})
</script>
my CSS look right this
#footer{
background-color: #E6E6E6;
background-repeat: repeat;
bottom: 0;
height: 100%;
pointer-events: none;
position: absolute;
width: 100%;
height:50px;
z-index: -1;
}
#header{
background-color: #E6E6E6;
background-repeat: repeat;
height: 100%;
pointer-events: none;
position: absolute;
top: 5px;
width: 100%;
height:50px;
z-index: -1;
}
#content{
pointer-events: none;
position: absolute;
width: 100%;
z-index: -1;
}
Finally
the html code
<div id="header">your content</div>
<div id="content">your content</div>
<div id="footer">your content</div>
works perfectly no matter how great be the content
;D
Related
I've a simple web page that contains a <div> on background (a green rectangle on background) and a second <div> that is the "body" it contains paragraphs, table etc
And on bottom I need to to put a simple footer containing juste copyrights and some socials networks buttons. The problem is : the footer is not on bottom, there is a space under the footer, how to avoid this please ?
See my simple code please
On jsfiddle is better (to see the space under the footer) see here please
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
You forgot to remove default margin of body.
Set in css:
body {
margin: 0;
}
Fiddle
body {
margin: 0;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin: -50px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
For best practice always set body and html 0 margin and 0 padding.
body,html{
margin:0;
padding:0;
}
Add this to .footer
margin-top:50px;
Perhaps you want to stick your footer to the bottom?
Clear the paddings and margins by:
html, body {
padding:0;
margin:0;
}
then
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
position:absolute;
bottom:0;
}
Working fiddle
Set the min height of body to 100% and set position to absolute.
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
}
html, body{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
min-height: 100%;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
position: absolute:
bottom: 0;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
For that case you just need to set the margin and padding of body tag to 0.
body {
margin: 0;
padding: 0;
}
Or if your site have margins specified you can only set the bottom margin of body as.
body {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
body {
margin: 0;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:10px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
Modify content css:
.content{
width:80%;
height:300px;
margin:10px auto;
background-color:gold;
text-align:center;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
padding-top:100px;
}
footer{
width:100%;
height:65px;
margin-top: -65px;
background-color:red;
opacity:0.5;
position: absolute;
bottom: 0
}
body {
margin: 0;
min-height: 100%;
padding-bottom: 100px;
position: relative;
box-sizing: border-box;
}
html {
height: 100%;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
You can fix footer at bottom by position: absolute;
Updated fiddle
Use position: absolute;bottom: 0; Style in footer class
footer
{
width: 100%;
height: 65px;
background-color: red;
opacity: 0.5;
position: absolute;
bottom: 0;
}
Click Here Live Demo
So I have been looking around on the internet to find a solution in order to make the footer stay at the very bottom on the page regardless of the length of the content of the page. I have followed the CSS from tutorials, the footer is only at the bottom of the page if the content is not long enough, if the content is much longer, the page will get the scroll bar and the footer will get stuck in the middle of the page as you scroll down for more content. Below is my CSS and HTML.
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
<html>
<body>
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Try to use this above in Css code
<div style="width: 100%;height: auto;border:1px solid red;float:left;">
<div style="width: 100%;height: auto;border:1px solid green;float:left;">
</div>
<div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">
</div>
</div>
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
position:absolute;
top:100px;
left:20%;
width: 1024px;
height:1300px;
background:blue;
}
.container {
position:absolute;
top:0px;
left:20%;
width: 1024px;
height:86px;
max-height:300px;
background:blue;
}
#footer{
position:fixed;
bottom:0px;
width:100%;
height:100px;
max-height:900px;
left:0px;
color:#000099;
background:#f2f2f2;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="country-container">Container 2</div>
<div id="footer">Footer</div>
</div>
change #footer to
position:fixed;
Please try this css and see fiddle link:
body,html{
background-color:#fff;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
.wrapper {
position:relative;
top:0px;
width:100%;
min-height:100%;
padding:0px;
margin:0px;
}
.country-container {
background: #0000ff none repeat scroll 0 0;
height: 1300px;
left: 20%;
position: relative;
width: 1024px;
}
.container {
background: #0000ff none repeat scroll 0 0;
height: 86px;
left: 20%;
margin-bottom: 3%;
max-height: 300px;
position: relative;
top: 0;
width: 1024px;
}
#footer {
background: #f2f2f2 none repeat scroll 0 0;
bottom: 0;
color: #000099;
height: 100px;
left: 0;
max-height: 900px;
position: absolute;
width: 100%;
}
https://jsfiddle.net/tn30t1k7/2/
Otherwise you can reffer this link:
http://www.cssstickyfooter.com/
<body>
<section class="wrapper">
<main class="content">
content
</main>
<footer class="footer">
footer
</footer>
</section>
</body>
html {
position: relative;
min-height: 100%;
}
body{
margin: 0 0 60px 0;
}
/* don't do that */
/* .wrapper {
position: relative;
} */
.content {
background: green;
height: 200px;
/* height: 700px; */
}
footer{
position: absolute;
bottom: 0;
left:0;
width: 100%;
height: 60px;
background-color: orange;
}
How about this https://jsfiddle.net/zkto8o88/2/.
.footer class will search for the nearest parent with relative position which in this case is html tag.
If the .wrapper class would have the position relative property then it would not work.
I am building a template which has a fixed header and a fixed side bar on the left. My issue is that when I shorten the window and scroll horizontally, the fixed div overlaps the adjacent '.content'.
I don't want the fixed '.sidebar1' to overlap '.content' div when I scroll horizontally. How do I fix this?
html,body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
.header
{
width:100%;
height:46px;
position:fixed;
top:0;
background:blue;
}
.page_wrap
{
width:1040px;
display:block;
margin:70px auto 0;
background:purple;
}
.content
{
width:500px;
height:1060px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
margin-left:270px;
}
.sidebar1
{
display:inline-block;
width:250px;
height:500px;
position:fixed;
top:70px;
background:pink;
margin:5px;
vertical-align:top;
}
.sidebar2
{
display:inline-block;
width:250px;
background:pink;
margin:5px;
vertical-align:top;
}
.footer
{
width:1040px;
height:50px;
margin: 20px auto 0;
text-align:center;
background:magenta;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Temp</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="header">
Header Content
</div>
<div class="page_wrap">
<div class="sidebar1">
sidebar 1
<div class="test"></div>
</div>
<div class="content">
Article Content
</div>
<div class="sidebar2">
sidebar 2
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
The reason for this is that fixed technically makes it take up no space on the page.
I noticed you have fixed width and height on your content, which is probably your first problem. Fixed width on large containers is typically a bad idea, as it breaks everything else on your page, or prevents it from displaying the way you want.
The end result should look something like:
.content{
width:500px;
height:1060px;
margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
}
If you need it to scroll horizontally for some reason, then I would say set position:fixed; on the div.content and add a property to your HTML wrap="off" and see if that does what you want it to.
Hopefully this helped. Cheers.
I hope I understood your question
Check https://jsfiddle.net/LeoAref/47p6r6hq/
<header>Header</header>
<aside>Side</aside>
<section>
<div class="wide">
My Wide Content
</div>
</section>
CSS
header {
height: 30px;
line-height: 30px;
background: red;
color: #fff;
text-align: center;
position: fixed;
top: 0;
width: 100%;
left: 0;
}
aside {
top: 30px;
bottom: 0;
width: 300px;
background: blue;
color: #fff;
text-align: center;
position: fixed;
left: 0;
}
section {
top: 30px;
bottom: 0;
left: 300px;
right: 0;
background: #000;
color: #fff;
text-align: center;
position: fixed;
overflow-x: scroll;
}
.wide {
color: #000;
width: 1500px;
background: yellow;
height: 50px;
}
I've been trying to get my footer to display properly, and have combined a number of approaches, but am still getting the same result. The footer sits a fixed number of pixels from the top of the page, and doesn't extend all the way across the page. I need it to display just below the content, no matter the size of the content, and for it to extend all the way across the page.
the CSS:
html, body, #container { height: 100%; }
#container { height: auto !important; min-height: 100%; margin-bottom:-50px;}
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-align:center;
float:left;
position:relative;
body:before;
content:"";
overflow:auto;
margin-top:50px;
padding:10px;
}
#footer, #push{
height:50px;
}
.clearboth {
clear:both;
}
The HTML:
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
You need to make sure that you reference your css file from your html, so your html should look like this, if they are in the same directory you don't need to add the path:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="path_to/YOUR_CSS_FILENAME_HERE.css">
</head>
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
and your css, I took away the left -5%:
#page {
min-height: 100%;
position:relative;
}
#main {
padding-bottom: 50px;
}
#footer {
background-color:#4a4a4a;
position: absolute;
width: 100%;
bottom: 0;
height: 50px;
padding:10px;
font-family:'discoregular';
display: block;
overflow:auto;
text-align:center;
float:left;
margin-top:50px;
}
change the css to the following.You can chage the "bottom" so that it can come up
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-decoration: none;
text-align: center;
width: 100%;
position: fixed;
z-index: 1000;
vertical-align: baseline;
bottom: -50px;
padding:10px;
}
All I added into my footer styles after reading this post was- overflow:auto; - and it's sorted now
<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;
}