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.
Related
Hello all the web editing professionals! I have a bit an “alternative” problem:::
First off, here is my webpage that I need help adjusting elements’ heights and margins with::: www.rebelrock.fi. Please open that webpage in another browser window first!
So there are three DIV elements with the parameter position: fixed there; The MENU, the LOGO and the bottom FOOTER.
My problem is with the LOGO included DIV (at the top of the page, right under the MENU) and the main page content MARGIN-TOP positioning.
So as the browser windows size (actually the WIDTH) is changed smaller, at one point the REBELROCK .png-file LOGO IMAGE at the fixed-positioned DIV above will start automatically adjusting the width and height of that logo image. And when the logo is getting smaller (both by WIDTH and HEIGHT), then the HEIGHT of the DIV – inside of which the logo is – will be getting smaller too – and that’s exactly how I want it to be.
However, the non-fixed main content that is scrollable vertically, and especially the MARGIN-TOP value of that content will NOT be adjusted by the changing height of the FIXED logo DIV above, causing there unwanted space between the fixed logo DIV and the main content of the page.
So my question is; HOW CAN THE MARGIN-TOP VALUE OF THE MAIN CONTENT ELEMENT BE CHANGED IN RELATION TO THE CHANGING HEIGHT OF THAT LOGO DIV ABOVE IT?
As You can see, the pages are by far not finished in almost any way but I first want to have all the basic HTML/CSS to be perfect until starting to add more specific detailed content to the website. The site itself was initially a template of ADOBE DREAMWEAVER but that’s not important here 😊
I really hope someone here could help me.
Thank You in advance!
Yours, Tommi Tiihonen
e-mail: tommi.tiihonen#gmail.com
My webpage: www.rebelrock.fi
Give The saurce code to change edits on your website
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:
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:
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/