I want to place a footer div at the bottom of the page. The problem is, I have a dynamic content, so I can not work with "position: fixed;".
The page looks something like this:
<body>
<div id="container">
<div id="navbar">...</div>
<div id="content"></div>
<div id="footer">...</div>
</div>
When I click a link in the navbar, another content is loaded with ajax and written in the "content" div. So the height of the page changes. The footer must always be at the bottom of the screen, when there is no overflow of the content and must be at the bottom of the page, when the content gets too long. How can I realize this?
with dynamic content, you can always use this:
sticky-css-footers-the-flexible-way
always helps!! :)
==================================================================================
EDIT
see this demo
CSS
html, body, #container {
height: 100%;
margin:0;
padding:0;
}
body > #container {
height: auto;
min-height: 100%;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color:grey;
}
#content {
padding-bottom: 3em;
}
HTML
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">My Dynamic Footer</div>
Note : In the fiddle, un-comment the text to see the footer stretching the height after a dynmic height content!!
Reference : Refer here
You're going to want to check out "CSS Sticky Footer": https://css-tricks.com/snippets/css/sticky-footer/
That's the solution you're looking for.
Yo can use this Structure:
position:absolute;
bottom:0;
width:100%;
height:150px;
and set
position:Relative
for its parent.
Related
Introduction
There are many good and well tested recipes for a footer that is always as the bottom of a page but is not fixed (or overlap content). Here is one that works for me: http://ryanfait.com/sticky-footer/
In short it works like follows:
HTML:
<html><body>
<div id="wrapper>SOME CONTENT</div><footer></footer>
</body></html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -4em;
}
footer {
height: 4em;
}
The trick is that #wrapper is forced to use 100% of available height, but is margin bottom leaves some space for a footer (negative margin is exactly the size of the footer).
Problem description
While building a Single Page Application, some javascripts frameworks like Ember.js adds additional divs to our document structure (for example to handle events). This creates an addtional wrapper around our original document which may look like this:
<html><body>
<div class="framework-container">
<div id="wrapper>SOME CONTENT</div><footer></footer>
</div>
</body></html>
This additional div breaks our CSS setup. To improve the situation we want to say that framework-container should behave exactly as body, so we may try to add:
.framework-container {
position: relative;
height: 100%;
min-height: 100%;
}
And it almost work: if the content is smaller than the page height. Otherwise there is a noticeable distance between the footer and bottom of the page - which we cannot accept.
Does anyone know a pure CSS solution to this problem?
I'm not sure if you said the wrapper worked or not, but you can tell Ember to insert the application into a particular element, and it won't insert any elements outside(above) that element.
Set the root Element
App = Em.Application.create({
rootElement: '#body'
});
HTML
<div id="container">
<div id="header">I'm a header</div>
<div id="body"></div>
<div id="footer">I'm a 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;
}
http://emberjs.jsbin.com/OPaguRU/1/edit
I totally jacked some of this from: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
If I set a min-height: 700px; on my sidebar, it works fine, however if the content length goes beyond 700 px, then the sidebar ends and the page content takes up the full width of the page. I want the sidebar to go down the length of the page, as long or short as the content is. How can this be done?
Here's my sidebar's css code:
#sidebar
{
float: right;
min-height: 700px;
min-width: 25%;
background-color: #FFFFFF;
}
Changing the height to 100% causes the sidebar to disappear completely.
Here's the html code;
<bod>
<div id="sidebar"></div>
<div id="content">Content here....</div>
</div>
Give it a position:absolute; with bottom:0px;
Check it out : http://jsfiddle.net/AliBassam/McJG8/
HTML
<div id="parentDiv">
<div id="content">Content here....</div>
<div id="sidebar"></div>
</div>
CSS
#parentDiv
{
position:relative;
min-height:700px;
}
#sidebar
{
position:absolute;
right:0px;
bottom:0px;
top:0px;
width:100px;
}
The #parentDiv now have min-height:700px; if its stretched by its contents, the #sidebar will stretch as well.
Not knowing the exact requirements of what you're trying to do, this sounds like a solution that could easily be fixed using Faux Columns.
In my website, I have a footer that has a height of 100px and the css for the footer looks something like the following:
.footnote {
width: 95%;
height: 100px;
position: fixed;
background: url('../images/coolfooter.png') bottom center;
bottom: 40px;
left: 30px;
}
The problem is if I have too much content on my web page, the content starts overlapping with the footer.
I want to restrict the content to only appear above the footer always somehow, so that no content gets overlapped with footer.
How can this be done?
Have you tried z-index? As others have said it's a bit hard to say without looking at the html. I'm not 100% sure what you're asking for.
You basically need to make sure that either the content has a bottom margin greater than or equal to the height of the footer, or (if the content is in a container of some sort) that it's container has a bottom padding equal to or greater than the height of the footer.
Here's a fairly popular reference site for doing this so-called "sticky footer": http://www.cssstickyfooter.com/
Adding overflow:auto to div.content should be sufficient.
<html>
<head>
<style type="text/css">
div.header
{
top:0px;
height:100px;
max-height:120px;
min-height:100px;
}
div.content
{
height:600px;
max-height:750px;
overflow:auto;
}
div.footer
{
height:100px;
max-height:120px;
min-height:100px;
clear:both;
}
</style>
</head>
<body>
<div class="header"></div
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
Problem
I'm using this implementation of a CSS sticky footer. It does:
html,body{
height:100%;
}
I use (would like to) use a repeating background, however, the height:100% causes this issue:
(image from another sticky footer question with unsatisfactory answers)
It's my understanding that the image gets sized to the size of the window at rendering, and thus never sizes past that.
Question
Is it possible to continue to use my existing choice of CSS sticky footer with a repeating background image rendered completely on long pages
OR
is there another option of CSS sticky footers which does support the repeating background?
For reference
<div id="wrap">
<div id="header">Header text</div>
<div id="main">
</div>
</div>
<div id="footer">Footer Text</div>
CSS
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;}
Simply add additional wrapper. At least I always do exactly that. And attach bg-image to div#no-footer, it will stretch to the bottom
html, body {
height:100%;
}
#wrap {
min-height:100%;
background-image:url(...) top left repeat-x;
}
#no-footer-pad {
padding-bottom:100px;
}
#footer {
height:100px;
margin-top:-100px;
}
html markup:
<html>
<head></head>
<body>
<div id="wrap">
<div id="no-footer-pad"></div>
</div>
<div id="footer"></div>
</body>
So you have almost this markup, you must simply add additional div (#no-footer-pad), so that your content would not overlap footer
Hey now used to position fixed for this sticky footer as like this
.footer{
position:fixed;
bottom:0;
left:0;
right:0;
height:xxxx;
}
I have the following HTML to build a 900 pixel wide, centered page, with a header, footer and content section:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
The layout is styled with the following (approx) CSS:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}
The CSS was originally based on a layout I found on the internet for 'sticky footers'. It worked perfectly with a sticky footer, but then I came across these problems:
1) The 'content' is never stretched to full size. This is a big problem on some of my pages because internal controls are set to a height of 100%. Since content isn't stretched, the controls show up all squeeshed.
2) I just added a background image and colour. This background should not show up in the middle content panes. Because the 'content' isn't fully stretched I get the background image showing in the wrong places.
I prefer a CSS only fix for this (ie. no hacks or JS). Any help?
I would expect removing the #mainMaster <div> and moving its background image into #main's CSS would sort your problem out:
<body>
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>
The problem you're running into is that #main's parent (#mainMaster) doesn't have an explicit height declared. Percentage heights only work properly when the elements parent has a height defined.
Try using min-height CSS property to set a minimum height for your content.
Adding a specific background color to #content and #header should prevent the background image from displaying in those areas. Not sure why the content isn't filling up the area, when you say "stretched" do you mean to a height of 100%? Browsers won't recognize a height of 100% without using js.