Geek Answers Handbook

Add spaces at the bottom of the HTML page

I am trying to create a website on which I have a title bar and page footer in fixed positions, i.e. The title bar is always above and below always below.

This created a problem in that I needed to push the content on the page up so that the page footer did not overlap the content. I need to add some space to the bottom of the content so that the match does not happen when the user scrolls to the bottom of the page. I tried to add the margin-bottom css property to the bottom of the DIV so that some space was added at the bottom of the page, this worked for the topmost DIV using the margin-top css property, but not for the bottom.

This is the basic structure of my site without content:

 <html> <head> </head> <body> <div class="CONTAINER"> <div class="PAGENAVBAR"> </div> <div class='CATEGORYNAVBAR'> </div> <div class='PAGE_CONTENT'> <div class="LEFTCONTAINER"> </div> <div class="RIGHTCONTAINER"> </div> </div> <div class="PAGEFOOTER"> </div> </div> </body>

Can anyone suggest a method to achieve this effect?

+7
source share
6 answers

use a paragraph for this. html paragraph

+1
source

I found this to be effective:

 body { padding-bottom: 50px; }
+16
source

margin-bottom moves the entire element, try padding-bottom instead.

+6
source

adding padding-bottom to the last element should do this, or you can add padding-bottom to the container element, just remember that it will be added to the height if it is set in your css

0
source

Try using padding-bottom instead. The behavior of this is more consistent across browsers than margin-bottom.

But remember that this will add the overall height of the item in question if you use this in any calculations.

0
source

I would give PAGE_CONTENT a margin-bottom ; you may also need to specify overflow:hidden if you are LEFTCONTAINER and RIGHT_CONTAINER .

0
source

More articles:


All Articles