Menu
So I made a contact page and I want the footer div to be sticking to the bottom of the page not right after the contact form.
But if I put everything to a container div with height:100%; and make footer bottom:0; then the page will be "too long", you have to scroll, etc...
My css so far:
#footer{ background-color:#fff; font:bold 14px; color:#1E88E5; width:100%; height:auto; padding:1%; border-top:1px solid #1E88E5; } Footer is just a normal full width div with some centered text atm.
806
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
Wrap the whole container in another element with position:relative and place the absolute element in it. The container should have position: relative to let the child make use of position: absolute .
You can probably use position: fixed to achieve this.
.footer { position: fixed; bottom: 0; } With this you will need to offset the bottom of the page so would suggest adding a padding-bottom to .main that is the height of the footer.
.main { padding-bottom: 30px /*whatever the height of your footer is*/ } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
