CODEWITHSUNDEEP
javascriptjqueryhtmlcssfooter
Sourav
Sourav

Reputation: 17530

Force a div to go to bottom

I browsed the same question in SO, and none of them worked well [Cross Browser compatible] .
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>

Upvotes: 2

Views: 6845

Answers (4)

Joonas
Joonas

Reputation: 7303

I 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

Upvotes: 2

gekowa
gekowa

Reputation: 452

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.com/css/css_positioning.asp

so you should use position:absolute.

Upvotes: 0

Nicklas A.
Nicklas A.

Reputation: 7061

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.net/Cj4c2/1/

And here it is with a wrapper: http://jsfiddle.net/CPSt6/

Upvotes: 1

Gatekeeper
Gatekeeper

Reputation: 1616

You should use position: absolute; bottom: 0px; That way div should be always on bottom of wrapping element. Wrapping element should have position: relative;

Upvotes: 0

Related Questions