This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do you get the footer to stay at the bottom of a Web page?
I've been helping a guy with the website here. If you'll notice, the on some pages (like this) the footer has some large whitespace underneath it, because the page is short.
How can we get the black in the footer to extend all the way down regardless of page height (and window/browser height?)
note: We don't want a sticky footer
I don't know of any reliable method to have the footer extend to the bottom of the page. However, to get the effect you desire, you could do the following:
Apply black background to body
Apply white background to #primary
Swap top margin of footer for bottom padding on #primary
Set the background-color of the HTML element:
html { background-color: #000 }
Related
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 2 years ago.
I am building a website with a relative footer (first picture) but as you can see the footer is not placed at the bottom when there is not enough content on the page.
I could resolve it with position absolute but then the content of the page is hidden behind the footer (picture 2).
My question
How can I put the footer on the bottom of the page but still push it down when there is more content added to the page.
Thank you for the help.
You can use position: fixed; bottom:0; for the footer and it is always at the bottom of your screen.
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
Stick div to bottom of screen and when the content gets longer than the screen and you have to scroll make the div go down with the content but wont come shorter than bottom of the screen.
QUESTION: How do i get a div to stick to bottom of screen and move down when the content gets longer than the screen where you have to scroll?
You have to position your HTML content the right way. Let's assume you want the footer tag at the bottom, so you need to put it as the last element in your body tag.
If you want to "simulate" space on your page before the actual content is put in, you can add a div with a specific height (for example 800px) that will stretch your page.
I have a page with 3 basic elements. You have your main content which runs down the center of the page at about 80% and has a white background. On the side of that main content you have the left and the right side at 10% each which for design reasons is grey. So far So good. Now I have my footer which as of recently was contained as a sticky footer and remained at the bottom of the page. I want the footer to be at 100% width and sit right under the content and if the page is being viewed on a screen that is too large then have the footer fill the rest of the page with white.
<p> I've tried everything that i know with the CSS I think I'm just missing something simple. I have to put some code in here to link to a fiddle </p>
Here is a link to the fiddle:
http://jsfiddle.net/dPek3/
You fake it by making your body background color the same color as your footer. You usually have to have a wrapper that contains your content to overlap this change, but it is extremely effective and I would recommend it. You also need to clear your floats. Here is a working example: http://jsfiddle.net/dPek3/1/
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Make a <DIV> occupy all VISIBLE height screen, with content below it
This probably has a strange title as I was not sure how to call this, however I am wanting to make a website similar to fiftythree.com where you see the homepage but then if you scroll down the navigation buttons appear. No matter the screen resolution if you open the website it will always be hidden until you scroll down. What is this called and how could I go about replicating it, thanks!
Have you tried making a div for your navigation and a div for your main content.
This website does not have a fixed navigation bar.
You might want to consider using a fixed position in your css if you want the navigation bar to be fixed. Also you might want a minimum width for your body tag (also css). This avoids your navigation elements stacking up on a small window.
How can I extend a div to the bottom of the page? Let's say I have a div that starts at the top, and has a background image I want repeated to the bottom of the page. How would I go about doing this?
Live example found here: http://mibsolutionsllc.com/ecgridos/about/ with the #content div.
Switch it around, have the background for your content as the body tags back ground then over lay the header over the top of it via a div or other element :)
CSS Sticky Footer does something similar, they've got a solution that seems to work on a whole range of different (including very old) browsers. If you don't need the footer you can always still use their solution and set the footer height to 0px.