Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

trying to get footer to stick to bottom

Tags:

html

css

here is my site http://iadprint.com/services

i have tried everything to get the footer to stick to the bottom but nothing wont work other than doing a set height in css on the tag #cright but i dont want to do that since dynamic content would go in there. can anyone see what im missing or doing wrong?

thanks

like image 723
Exploit Avatar asked Mar 28 '11 03:03

Exploit


People also ask

How do I get my footer to stay at the bottom of content?

Just wrap your . container and your . footer in a flex container with a min-height: 100vh, switch the direction to column so that they stack on top of each other, and justify the content with space between so that footer will move to the bottom. This is THE way to go!

How do I stick the footer at the bottom of the page in CSS?

To make a footer fixed at the bottom of the webpage, you could use position: fixed. < div id = "footer" >This is a footer. This stays at the bottom of the page.

How do I fix a footer at the bottom of the screen in HTML?

The footer is set to absolute , sticking to the bottom: 0 of the page-container it is within. This is important, as it is not absolute to the viewport, but will move down if the page-container is taller than the viewport. As stated, its height, arbitrarily set to 2.5rem here, is used in the content-wrap above it.

How do I make my footer stick to the bottom react?

To make a sticky footer in React, we can set the position CSS property of the footer element to fixed . We set the style prop of the footer div to an object that has the position property set to 'fixed' . Also, we set the bottom property to '0' to keep the footer div at the bottom.


1 Answers

add to your footer css

position:absolute;
bottom:0;

If you want footer to always be at the bottom regardless of window scroll then use

position:fixed;
bottom:0;
like image 137
Hussein Avatar answered Nov 15 '22 23:11

Hussein