1

I am trying to position a <div> always below anything else on the page. The <div> is inserted using javascript and it is always the last element on the page before </body>.

So far I have tried clear:both and position:relative which works really good but breaks if the content (above elements) are positioned absolute - Here is an example.

So what I am looking for is some css/js magic to always position a <div> below anything else.

I don't know how much elements are above the injected <div> and I don't know how they are positioned.

Unfortunately position:fixed is not an option.

My Solution

I ended up doing it with help of javascript:

After inserting the absolute positioned <div> element into the page I calculate the page height using the following function:

function getBodyHeight() {
  var body = document.body, html = document.documentElement;
  return Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
}

and set the top position depending on the body height:

element.style.top = (getBodyHeight())+"px";
T J
  • 42,762
  • 13
  • 83
  • 138
Timur
  • 639
  • 6
  • 21
  • this will always depend on the rest of your page content. We need to set certain wrapper elements, apply specific properties to it to make a sticky footer. If you ask , no matter what i do, whatever maybe the properties of other elements, my div should be always on bottom - no, can't do. – T J Mar 13 '14 at 09:47
  • @TilwinJoy and with some JS help? – Timur Mar 13 '14 at 10:03
  • 1
    _“but breaks if the content (above elements) are positioned absolute”_ – well of course it’ll break under such circumstances, because absolutely positioned elements are taken out of the document layout flow. If you can’t refrain from using absolute positioning, then your only option is to use JavaScript to measure the dimensions of those elements and adapt the position of your bottom element accordingly. – CBroe Mar 13 '14 at 10:07
  • @CBroe a relative positioned wrapper can take care of the `absolute` problem i guess. – T J Mar 13 '14 at 10:13
  • @TilwinJoy: Only if you can give that wrapper an explicit height, because it’ll not get its height automatically from absolutely positioned descendants. – CBroe Mar 13 '14 at 10:50
  • @CBroe i don't think that will be a problem, we can give `min-height: ` whatever we want the content to be.. – T J Mar 13 '14 at 10:52
  • A min-height does you no good if the actual content will take (much) less or more space … you’ll be left with either a wide gap, or have overlap. – CBroe Mar 13 '14 at 11:01

4 Answers4

1

The following script should do the trick:

$(document).ready(function() {
    var height = $('#content').height();
    $('#mydiv').css({top: height});
});

JSFiddle

Keep in mind, for this to work, you need to apply position:relative for #mydiv

T J
  • 42,762
  • 13
  • 83
  • 138
Pinki
  • 1,042
  • 9
  • 17
  • ok, i'll try to rewrite this in plain js because unfortunately i cannot use jquery – Timur Mar 13 '14 at 10:21
  • http://stackoverflow.com/questions/10118172/setting-div-width-and-height-in-javascript This should work together. – Pinki Mar 13 '14 at 10:25
  • @Tilwin Joy You know if it is not relative, the element wont show at all because it is outside of the documentflow. The Fiddle http://jsfiddle.net/Hn3Nx/3/ works fine – Pinki Mar 13 '14 at 14:55
  • @Pinki i ended up doing it with help of javascript – Timur Mar 14 '14 at 12:38
-1

Maybe you could try this: http://jsfiddle.net/Hn3Nx/2/

CSS: set position relative for the body, and absolute for the #mydiv

#mydiv {    
    position: fixed;
    height: 150px;
    background-color: red;
    width: 100%;
    bottom: 0;
}

body {
    position: relative;
}
d.yuk
  • 809
  • 1
  • 12
  • 30
  • @TilwinJoy I saw OP said "position fixed is not an option because its above the content i want it to be UNDER the content", I just can't see why. – d.yuk Mar 13 '14 at 10:14
-1

Take a look at insertAfter() and inserBefore() functions, they are what you need apart from some logic from your side.

And if you are still feeling it hard to think then detach the div using jQuery detach() and insert whatever you want to and then attach the div again to <body> using append(). And if you wanna do it in javascript, your task is then to figure out the equivalents of these functions. I use jQuery for these tasks.

halkujabra
  • 2,844
  • 3
  • 25
  • 35
  • these methods will simply inject the div at a specific position in `DOM`, it doesn't guarantee that it will not be hidden by existing content... it totally depends on the CSS... moreover there is no jquery tag in question... – T J Oct 18 '14 at 08:27
-1
Please remove position: absolute; from #content this is one option.

**HTML**
<div id="content">sadas asdasd asdsa dsad sa</div>
<div id="mydiv">sadasdsa</div>


**CSS**

#content {
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    border: 0;    
    overflow: visible;
}

#mydiv {    
    clear: both;
    position: relative;
    height: 150px;
    background-color: red;
    width: 100%;
}
Raju Telee
  • 1
  • 3