Im trying to implement sticky footer to my site but for some reason it doesnt want to work and its pushed more than it needs to be. I've tried many "sticky footer" tutorials but there is always something not working.
Please check my fiddle: http://jsfiddle.net/Qx5Fz/1/
html, body {
height: 100%;
}
#content {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 40px;
}
#footer {
position: relative;
margin-top: -40px; /* negative value of footer height */
height: 40px;
clear:both;
}
Updated to allow for overlapping sidebar: http://jsfiddle.net/Qx5Fz/12/
The issue you are having is using position: fixed; height: 100%; on the sidebar. That causes the sidebar to be 100% of the window, which will always push your footer down when it should be at the bottom of the window.
I'm using sticky footer from here: Sticky footer + textarea height in percentage (source: http://css-tricks.com/snippets/css/sticky-footer/)
You need to put all your content inside of one div including your header. Then use this css to get the footer to work. This takes into account vertical margins, so you'll need to either incorporate any into the calcs, or just use padding.
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
#wrap {
height:100%;
margin: 0;
}
#wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -100px;
}
#wrap:after {
content: "";
display: block;
}
#footer, #wrap:after {
/* .push must be the same height as footer */
height: 100px;
}
I added top: 0 to sidebar.
try
#footer { position: fixed; }
instead of relative
try this: http://jsfiddle.net/Qx5Fz/8/
#footer {
position: fixed;
height: 40px;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
}
Related
This is a sample HTML page:
<html>
<body>
<div class="content">
</div>
<footer> </footer>
</body>
</html>
This is my style sheet:
html {
height: 100%;
}
body {
position: relative;
margin: 0;
height: 100%;
}
.content {
width: 8cm;
position: absolute;
background-color: #ff0;
height: 15cm;
}
footer {
position: absolute;
bottom: 0;
background-color: #f00;
width: 100%;
}
This is how it looks like:
My problem is that I want the red footer to be at the bottom of the page (not the bottom of the viewport), assuming that the .content is of an variable height actually. Is that possible without JavaScript?
This Fiddle shows a footer that is always either at the lowest point on the page or on the bottom of the viewport.
The DIV is positioned at the bottom of the viewport when the content does not fill the page, and stays below the content when the content gets taller than the viewport.
To accomplish this, use a min-height on the body like this:
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
footer {
position: absolute;
bottom: 0;
}
Tested in Safari 8.0.3.
I'm currently having a few issues keeping my footer at the bottom of the page and below the content. I currently have it sitting at the bottom of the page, just keeping it below the content seems to be the issue.
My footer layout is:
#footer
#footer-content
p.copyright
p.credit
/#footer-content
/#footer
My stylesheet:
#footer {
overflow: hidden;
clear: both;
max-width: 940px;
padding-top: 26px;
border-top: 1px solid #bbb;
color: #aaa;
position: fixed;
height: 80px;
width: 50%;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
padding-bottom: 0;
text-align: center;
}
#footer-content {
width: 100%;
}
Setting position to absolute makes the whole footer disappear somewhere off the page so I can't just change that.
What can I do to keep my footer below the content? I'm open to any JavaScript solutions.
FIDDLE (Since it's WordPress I can't copy over everything)
EDIT:
Made a few edits. Still doesn't change my problem.
What you are describing is a footer that's on the bottom of the content. Defining the stuff in your footer div is unneeded information. You could have a diamond unicorn in the footer for all we care. The real information that's needed is the basic layout aka header region, content region, sidebar regions, footer region.
here is a live demo of what this will do http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
This will expand the content on short content to push the footer to the bottom. for longer content the footer is under the content as the content gets bigger.
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
You need a container that will take up the view area and by setting the footer div to the absolute bottom of the container it will be on the bottom. the content "body" will expand the container as needed and the footer will be on the bottom just under the content every time. divs by default have a display:block so they will push to the next line every time.
I use this code across any websites that I make and it works for me -
#footer{
display: block;
text-align: center;
font-size: 0.75em;
bottom:0;
width: 100%;
height: 30px;
position: fixed;
}
I would believe that all your position: fixed is causing the problem, so I've tried cleaning it up for you in this JSFiddle.
The position: fixed; sets the divs position relative to the browser-window, and not the page.
I have editted your JSFiddle to apply a 'sticky footer'.
Your document structure had to change for that:
body
#container
...content...
#wrap-push
#footer
added this css:
html, body {
height: 100%;
}
#container
{
height: 100%;
margin-bottom: -107px;
}
#wrap_push
{
height: 107px;
}
#footer
{
height: 80px;
}
I want an out put similar to this Image..!
following is what i've tried to do.JSfiddle
P.S: I cannot edit the structure of the content.
Since you can't edit the HTML, you can't use floating properly, which would be the perfect solution.
But then you can use absolute positioning:
div {
width: 500px;
min-height: 100px; /* image height */
position: relative;
text-align: justify;
}
img {
width:100px;
position: absolute;
top: 0;
right: 0;
}
p:first-child {
max-width: 400px; /* wrapper width - image width */
}
Demo
If you look at this fiddle: http://jsfiddle.net/bastien/PybrF/1/
#header {
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: yellow;
}
#content {
top: 51px;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
background-color: orange;
}
If you resize the window then the vertical scrollbar gets visible in the content div. BUT it gets only visible (so it seems for me...) when I have exceeded the height in pixel of the header while resizing the window.
How can I get the vertical scrollbar correctly?
UPDATE
I want a header which stays fixed.
I want a content which has inside scrollbars.
something like this: http://jsfiddle.net/bastien/PybrF/7/
but the vertical scrollbars should start inside the content div and not start at the header/body.
Try this in your css:
* { margin: 0; padding: 0 }
#header, #content { width: 100%; position: absolute; }
#header {
height: 50px;
background-color: yellow;
}
#content {
top: 50px;
height: 70%;
overflow-y: auto;
background-color: orange;
}
Will produce this:
As for the height of the content to use all the space left, I would to a js function wired to the resize event to set the height of the content to the page height minus the height of the header. I honestly don't know another solution for this.
Due to your use of fixed positioning and application of overflow settings, only the #content area will scroll.
Consider this:
1) Add the orange background color to the body element and remove its margins:
body {
margin:0px;
padding:0px;
background-color: orange;
overflow-x: hidden;
overflow-y: auto;
}
2) Position the other elements relatively:
#header {
position: relative;
height: 50px;
background-color: yellow;
}
#container {
position:relative;
}
http://jsfiddle.net/PybrF/6/
EDIT:
I'm still unclear on what you're looking for, but here's another method.
This one keeps the header fixed and puts the scrollbar inside the #content area.
body {
background-color: orange;
margin:0px;
}
#header {
position: fixed;
top: 0px;
left: 0px;
height: 50px;
width: 100%;
background-color: yellow;
z-index:1; /* keep the header on top of the content */
}
#content {
position:relative;
padding-top:50px; /* height of the header */
}
http://jsfiddle.net/PybrF/8/
ok I knew it must work:
Still found some old similar code and refactored it:
have fun! :)
Sorry for telling crap.
Remove the width/height percentage settings and use the left/right/bottom etc settings. Thats enough.
Forget about the main div which was from this other project long ago.
http://jsfiddle.net/bastien/PybrF/12/
I am trying to do the following in a CSS template:
Dock the footer to the bottom when there is not enough content to
fill the page
Stretch the header and footer background across the whole width
Position all the content in the middle of the page
This is the code I have, created with help on here:
http://tinkerbin.com/lCNs7Upq
My question is, I have seen a few ways to achieve this. Is this the best? It seems a shame to have to have the empty div as well, is this a bodge?
You can fix and element to the footer using CSS:
position: fixed;
bottom: 0;
However, I'm trying to figure out what exactly your trying to do.
You header and footer should automatically go 100% across the page if it's a div.
Your middle section can be set to height: auto; via css and will fill up the viewport pushing the footer all the way to the bottom, but to do this you also have to set the body to 100% in order to get it to work.
html, body, #content {
height: 100%;
min-height: 100%;
}
#header {
height: 100px;
width: 100%;
background: blue;
position: fixed;
top: 0;
}
#content {
height: auto;
margin: 100px auto;
background: green;
}
#footer {
position: fixed;
bottom: 0;
height: 100px;
width: 100%;
background: red;
}
Your HTML should look somewhat like this:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
Working Example: http://jsfiddle.net/s4rT3/1/
This is the best example I have seen:
http://css-tricks.com/snippets/css/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
Update: In 2019 using flex is a better option.