Make the footer stay at bottom of the page without content getting clipped

Question

I am calculating the window height and other elements height and making the footer stay at bottom. I tried with JavaScript but the footer is only taking the header element height and aligning the footer just below the header. I wanted to make the footer stay at bottom with the help of JavaScript. Using position as fixed in css clips the content. I want the footer to grow as and when the content grows. Thats the reason i am trying to achieve this in JavaScript or JQuery and not pure CSS.

JSFiddle Code

$(document).ready(function() {
function pageheight() {
debugger
  var ContainerMinHeight = ($(window).height()) - (($("header").height()) + ($("footer").height() + 27));
  $("body").css("min-height", ContainerMinHeight);
}
pageheight();;
});

Don't use JS for styling. CSS is more than capable of achieveing this. See the duplicate for more information — Rory McCrossan, Oct 15 '19 at 07:34
I am not looking for a position fixed approach. I want the footer to move as and when i resize my browser. — tkamath99, Oct 15 '19 at 07:50
Position fixed will remain fixed and the content will be hidden when the content grows. I dont want that to happen. I want the footer to grow as and when the content is added. — tkamath99, Oct 15 '19 at 07:51
@RoryMcCrossan I have updated the question. I suppose this shouldnt be a duplicate as i am not asking the solution in pure CSS. — tkamath99, Oct 15 '19 at 07:56

score 0 · Answer 1 · answered Oct 15 '19 at 07:26

0

Use fixed positioning, don't really need to use jquery at all

answered Oct 15 '19 at 07:26

Jakub L

17
2

score 0 · Answer 2 · answered Oct 15 '19 at 07:29

0

you can do it by css:

position: fixed

Reference here: https://www.w3schools.com/css/css_positioning.asp

answered Oct 15 '19 at 07:29

odarino

62
4

score 0 · Answer 3 · answered Oct 15 '19 at 07:30

0

Try with css

position: fixed

Apply this css at the parent div

answered Oct 15 '19 at 07:30

jyotishman saikia

2,079
1
15
11

This will clip the content when the content grows. – tkamath99 Oct 15 '19 at 07:52

score -1 · Answer 4 · answered Oct 15 '19 at 07:27

-1

You can do with CSS only. No need to use Js or Jquery.

Reference: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_footer

answered Oct 15 '19 at 07:27

Pushprajsinh Chudasama

7,772
4
20
43

This will clip the content when the content grows. – tkamath99 Oct 15 '19 at 07:53

score -1 · Answer 5 · answered Oct 15 '19 at 07:27

-1

You can try to use CSS with position fixed. Example CSS rules:

answered Oct 15 '19 at 07:27

Artur R.

248
2
9

score -1 · Answer 6 · answered Oct 15 '19 at 07:27

-1

You can use fixed position in css. You also have to take care that the html and the body element take 100% of the windows height.

answered Oct 15 '19 at 07:27

Tarik Weiss

336
2
15

Make the footer stay at bottom of the page without content getting clipped

6 Answers6