My Programming Tricks

Caveman Blogger

This is a pure CSS solution. I have tested the following codes using Chrome, IE7 and an Android internet browser. I believe it should work well on all popular browsers.

Here are the codes:

<!DOCTYPE HTML>
<html>
<style type="text/css">

#fixbot {
position: absolute;
bottom:0px;
}

div > div#fixbot { position: fixed; }
</style>

<body bgcolor="#aabbcc" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0>

<div>
<div id="fixbot" style="border:0px; width:100%; height:50px; background-color:#ddd; text-align:center; padding:0px; ">
Hello I am here!
</div>
</div>

<table width="95%" align=center><tr><td>
 line 1 line 2 line 3 line 4 line 5 line 6 line 7 line 8 line 9 line 10
 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20
 line 21 line 22 line 23 line 24 line 25 line 26 line 27 line 28 line 29 line 30
 line 31 line 32 line 33 line 34 line 35 line 36 line 37 line 38 line 39 line 40
 line 41 line 42 line 43 line 44 line 45 line 46 line 47 line 48 line 49 line 50
 line 51 line 52 line 53 line 54 line 55 line 56 line 57 line 58 line 59 line 60
 line 61 line 62 line 63 line 64 line 65 line 66 line 67 line 68 line 69 line 70
</td></tr></table>

</body>
</html>

The following is a screen capture of the codes running on Chrome:

The good thing about this pure CSS solution is that you don't need to use Javascript to detect the change in the page resize or page height to fix the DIV at the bottom of the page.

The most important part of the code is "div > div#fixbot { position: fixed; }". For it to work on IEs, you'll need to include the DOCTYPE. Enjoy!

My Programming Tricks

Labels

Friday, November 13, 2015

Fix the Position of a DIV at the Bottom of a Page for All Browsers

1 comment: