I browsed the same question in SO, and none of them worked well [Cross Browser patible] .
So, i'm looking for the same job to solve with jQuery.
I want to place the div at the bottom of the HTML page, not to the bottom of the screen.
I've tried with CSS only so far
clear: both;
min-height: 6%;
position: fixed;
bottom: 0;
Edit
My CSS
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#footer {
width: 100%;
height: 6%;
position: absolute;
bottom:0px;
left:0px;
}
#content {
float: left;
width: 59.5%;
height: 83%;
position:relative;
}
#news {
z-index:2;
}
<html>
<div id="content">
<div id="news"> </div>
</div>
<div id="footer"></div>
<html>
I browsed the same question in SO, and none of them worked well [Cross Browser patible] .
So, i'm looking for the same job to solve with jQuery.
I want to place the div at the bottom of the HTML page, not to the bottom of the screen.
I've tried with CSS only so far
clear: both;
min-height: 6%;
position: fixed;
bottom: 0;
Edit
My CSS
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#footer {
width: 100%;
height: 6%;
position: absolute;
bottom:0px;
left:0px;
}
#content {
float: left;
width: 59.5%;
height: 83%;
position:relative;
}
#news {
z-index:2;
}
<html>
<div id="content">
<div id="news"> </div>
</div>
<div id="footer"></div>
<html>
- what is it that you want to achieve with this? I think it might give some wiggle room for the possible solutions. I mean, you do explain what you want. Div at the bottom ..in what type of situations? – Joonas Commented Jul 19, 2011 at 8:50
- div at the bottom in every situation, no mater if text is of 1 line or 10000 lines – Sourav Commented Jul 19, 2011 at 9:26
4 Answers
Reset to default 2I believe you want sticky footer after all.
jsfiddle demo
It uses this sticky footer.
Basic idea is to use that sticky footer or basically any Sticky footer and then color your #wrap, because it will cover the whole viewport vertically
Set height of body and html to 100%, then create a wrapper for the entire body that has position: relative and height:100%, when you have the element inside this wrapper it will align to the bottom.
<html
<body>
<div id="body-wrapper">
<div id="bottom"></div>
</div>
</body>
</html>
With CSS:
body, html {
height:100%;
}
#body-wrapper {
height:100%;
position:relative;
}
#bottom {
position:absolute;
bottom:0px;
left:0px;
}
Here is what happens without a wrapper: http://jsfiddle/Cj4c2/1/
And here it is with a wrapper: http://jsfiddle/CPSt6/
You should use position: absolute; bottom: 0px; That way div should be always on bottom of wrapping element. Wrapping element should have position: relative;
Please refer to the css document:
An element with fixed position is positioned relative to the browser window. An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is
src: http://www.w3schools./css/css_positioning.asp
so you should use position:absolute.