Extend color of the bg of the footer to the bottom of the page.
-
Hi.
Some of my (TwentyTen based theme) pages contain a small amount of content, so the footer sometimes sits halfway up the page leaving a blank white space underneath. I would like color of the bg of the footer to extend to the bottom of the page while all the footer links staying in their original place. I do not want to push footer itself down to the bottom of the viewport thought. How this can be done?
Anyone?
Thanks.
-
Maybe u could either add a height value to the CSS for the footer e.g
footer{height:300px;}
or increase or add padding to the bottom of the footer, just enough to take the background to the bottom of the page.well, all the pages are different height… and then there would be unnecessary vertical scrolling…
Can you provide a link to a page where this happens? As you say, the height is variable and also depends on the users browser window, so it may not be possible, but with a link someone can look at it.
Sorry, the site is still in under construction/maintenance mode.
Can you provide your HTML and CSS code for the problematic webpage, using PasteBin? Then send us a link to those PasteBin pages.
height: 100% for your body main or the footer does not do anything…
100% means 100% of the content in that element — it’s not related to the window size.
In the example (link) the footer is pushed to the bottom of the screen, I would like to figure out how to extend it’s color to the bottom of the browser window thought.
You might be able to add a “dummy” element that is the same color as the footer (and thus invisible as a separate element) and use the CSS code in the above linked article to put that at the bottom of the page.
Interesting idea, I’ll give it a try.
If that doesn’t work, we really need either a link to your website (local servers can be made online) or your HTML and CSS code. Otherwise it’s difficult to resolve a hypothetical issue.
- The topic ‘Extend color of the bg of the footer to the bottom of the page.’ is closed to new replies.