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.
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 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.
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 }
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.
This question already has answers here:
Problems with CSS sticky footer
(12 answers)
Closed 8 years ago.
What I mean is that a footer will always be at the bottom of the browsing window, even if there is a lot of content and normally the footer will be out of view, not the usual "sticky footer" where the footer will always be after the content.
I could achieve this with frames, but how would I do it in a cleaner way with CSS?
.the-other-kind-of-sticky-footer { position:fixed; bottom:0; }
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS: fixed position on x-axis but not y?
I have a HTML page which is supposed to scroll horizontally which has a fixed position header tag.
In the case that a vertical scrollbar appears (resize window) I want the header to scroll relative with the rest of the content.
Can anyone think of a possible non-javascript solution?
Fixed position has pretty lousy support on iOS devices. Instead of using a fixed position for your header, you should leave it static on the page. Surround your content you want to scroll horizontally with a container with overflow: auto, so that the content scrolls rather than the entire page.
Preview: http://jsfiddle.net/Wexcode/vfZjb/