Hi,

Could someone kindly educate me on how to ensure the footer stays at the bottom of the screen regardless of the amount of content on the page. i.e. minimum page height. I've googled and tried various instructions, but none seem to work.
I've set the wrapper div to min-height:100% and position:relative. I've set the footer div to height:60px and position:absolute. This seems to be the solution for most themes but I've had no luck with it on the Amity Island theme.

Thanks!

Comments

Terebinth’s picture

Terebinth CreditAttribution: Terebinth commented

Bump

shruti.sheth’s picture

shruti.sheth CreditAttribution: shruti.sheth commented

Hello,
The following can be one of the solutions to this issue.
1. Add the following css code in your style.css file

#footer {
  position: absolute;
  top: 500px;
  width: 75%;
}

#middle-wrapper {
  position: relative;
  height: 445px;
  width: 75%;
}

#middle-wrapper #main-content {
  height: 380px;
}

2. You will have to give individual node css to the specific nodes that have larger content, for e.g. as follows, 

#node-2 .node-inner .content  {
  height: 230px;
  overflow: hidden;
}

Hope this helps!

Thanks,
Shruti