-1

I have this setup on my page, this works fine if the head + content + foot fits the screen height. But when the content grows, it will grow under the foot, instead of pushing the foot to the bottom of the page.

How can I fix this?

<body>    
<div class="head">
    Head
</div>

<div class="container">
    Content
</div>    


<div class="foot">
    Foot
</div>
</body>
Troyer
  • 93
  • 1
  • 12
  • Please provide your code in JSFiddle - http://jsfiddle.net/ - so we can understand better and help you – Yonatan Ayalon Jul 26 '15 at 08:03
  • Please provide your code in a [HTML/JS/CSS snippet](https://blog.stackexchange.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) (the `[<>]` button), so we can understand better and help you. Make sure to include your CSS, because that is likely the cause of the issue. – GolezTrol Jul 26 '15 at 08:07
  • Already created the solution in JSFiddle - https://jsfiddle.net/fixit/55frzot1/8/ – Yonatan Ayalon Jul 26 '15 at 08:10

1 Answers1

0

You probably have CSS doing that. If you have this HTML without markup, that doesn't happen.

Most likely, you have a CSS that looks like this, which needs to be removed.

.foot {
  position: fixed;
  bottom: 0;
}
GolezTrol
  • 114,394
  • 18
  • 182
  • 210