I have a site that I need a sticky footer. I would like the footer to always be at the bottom of the page no matter what the users screen size. If the content goes longer than the screen I want the footer to move down with it. I want this to be all DIVs with no tables.
The below post is what I am looking for although the answer does not work with asp.net tag. When I have the form tag all css is ignored. As soon as I take out the form tag the footer sticks to the bottom perfectly.
How do you get the footer to stay at the bottom of a Web page?
Tried following?
.fixedPosition {
background-color:black;
position:fixed;
min-height:200px;
left:0px;
right:0px;
bottom:0px;
}
this will fix your wrapper to the left, right and bottom. You can then decide, what height it will have.
If there is a problem with positioning form (i dont know) try to wrapp it.
<div class="fixedPosition"><form></form></div>
Helped that?
In your css set the display property on header, content and footer divs to block.
#header {
display:block;
}
#content {
display:block;
}
#footer {
display: block;
}
If your header, content, and footer divs appear in your html page in that order then the footer should always appear beneath your content, unless there is other markup in your code that's not being shown in the example.
Related
I am building a page and for some reason my footer will not stay at the bottom of the page, it basically floats right in the middle of "article".
I add postion absolute, and bottom 0 but does not work
You can view a live example here: http://codepen.io/bskousen/full/rqbHc
Try adding this in the css:
footer
{
position:static;
clear:both;
}
In this fiddle I want to create a footer that stays at the bottom of the page, as in this screenshot:
However, when the browser window is minimized so that the viewport is less than the content area, and the page is scrollable, the footer stays in the middle of the page rather than below the content. Once a user scrolls, the footer stays in the middle of the content boxes, like in this screenshot:
How do I create a footer that stays at the bottom of the viewport when there is no scrollbar, but then stays at the bottom of the content boxes when a scrollbar appears and content is outside the viewport?
I am using position:absolute; bottom:0; on the footer. Do I need to add declarations to my content box, or to the footer? Thanks for your help!
There are a lot of attempts to do this via CSS, most are hacky workarounds, and honestly its WAY easier to do with Javascript. But for pure CSS, it usually goes something like this:
1) Setting * to border-box:
* {
-webkit-box-sizing:border-box;
-moz-bos-sizing:border-box;
box-sizing:border-box;
}
2) Set footer to position:absolute, with fixed height:
#footer {
position:absolute;
left:0;
right:0;
bottom:0;
height:40px;
}
3) Set html,body, and your container to height:100%, min-height:100%, and your container position to something other than static, and padding-bottom to whatever your footer height is + a little gap (if you want):
html,body,#container {
height:100%;
min-height:100%;
}
#container {
position:relative;
padding-bottom:50px;
}
This should handle it decently well for IE8 and above. For IE7 and below ... well that gets pretty damn tricky, you can google that one if you'd like. :) Some notes:
The box-sizing declaration is needed to ensure height of 100% includes padding (otherwise it would just be 100% plus the padding you gave it).
when position:absolute is used on a child element, position other than static must be declared on the parent for the childs position to be relative to the parent, otherwise it will be the first parent up the DOM tree with position other than static (in this case, it will just be the window).
I have been stumped by what I hope is a very simple problem. I have a page that consists of two divs:
<div id="header">...</div>
<div id="content">...<div>
The header will be fixed to the top of the page and the main content section will scroll normally. I need my main content div to scroll over the header, covering it up as it does so.
I can accomplish the look and feel I want by fixing the header to the top, giving the main content a margin-top large enough to be in the correct place, and adjusting the z-index so that the main content scrolls over the header. The problem is that when I do this the main content division's margin-top covers up all the links and hover elements of the header, making them visible, but inactive.
I really hope this is an easy fix. Could someone please suggest something? I am trying to do this without resorting to javascript. Thanks a lot in advance!
I actually had the same problem and come up with this http://jsfiddle.net/EWefL/
<header>Working header link</header>
<section>Section</section>
header {
background:#cff;
height:100px;
position:fixed;
right:0;
left:0;
z-index:100;
}
section {
background: #579;
height:600px;
top:100px;
position:relative;
z-index:200;
}
Basically using position relative and the top attribute instead of margin-top. One important thing to note is that the z-index always needs to be set higher than zero.
We need to display data in a scrollable div.
We have created a simplified fiddle to demonstrate: http://jsfiddle.net/ZsQ5J/3/
The div contains two parts, a header and the content.
We want the Header to scroll horizontally along with the content, but to be fixed while vertical scrolling through the content.
We would like to achieve this completely in CSS if possible, we could solve it with jQuery I guess, but would prefer not to have to.
We have got most of the way there in CSS, but we can't get the content div to stretch the full width of the header. Because, I guess, making the content div 100% of the containing div isn't the full width of the header.
In a little more depth:
HEADER:
We want the header to stay visible all the time when scrolling up/down through the content. However the header is wider than the containing div so we do want it to scroll horizontally. (So no vertical scroll on the header, just horizontal). We have got this part working. The header is a table.
CONTENT:
The content is a div that we want to scroll both horizontally (in sync with the header) and vertically (independently of the header). This is the part we are having problems with. The scroll is working well, but the width is not expanding to match the header. It will only go as wide as the containing div.
I know it's weird to have a table as the header and a div as the content, but due to legacy issues we need to keep it this way.
Not sure from the question if you can add addition elemnts to markup, but if you can, possible solution is this: http://jsfiddle.net/ZsQ5J/8/
But there is possible problem — scrollbar will not be seen bu default. Is it ok this way?
Not sure if this is exactly what you want but this works.
-Wakeeta
body
{
width:100%;
}
#outer_container
{
margin-top:20px;
margin-left:auto;
margin-right:auto;
width:100%;
border:6px solid #FF0000;
overflow-x:auto;
overflow-y:hidden;
}
#top_container
{
display: block;
width:1500px;
padding:10px;
background-color:#CC66FF;
}
#bottom_container
{
height: 400px;
width:1500px;
padding:10px;
background-color:#FFFF66;
overflow-y:scroll !important;
}
em
{
font-weight:bold;
}
I have the following CSS which positions a div at the bottom of the page.
Q: How can I stop content flowing underneath it?
#footer {
position:fixed;
bottom:0;
background:url(../images/bg-footer.jpg) top;
z-index:200;
height:34px;
width:100%;
line-height:34px;
padding:0;
font-size:11px;
color:#fff;
}
I can't add padding to the body or anything because I have a fullscreen background image in place as per this tutorial:
http://css-tricks.com/how-to-resizeable-background-image/
try the sticky footer
Have you tried using: position:absolute; instead?
If you want to keep the content above your footer you should start by removing the positive z-index from it.
If you have the footer as the final div of the page (perhaps wrapped in a full page div) then try setting the clear property to both in your css, eg:
clear: both;
Which should prevent any other divs from falling below the footer.