How to stop Sticky Footer from covering content...?

Question

I'm using a "sticky" footer, but on a couple of pages it overlays the content. Is there any way to prevent this from happening, but retaining it's "sticky" quality? I tried using `min-height:` on `HTML` and `body`, but that didn't work. CSS: ``` html { background: black url(images/bg2.jpg) no-repeat 200px center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; } body { margin: 0; height: 100%; padding-left: 40px; padding-top: 25px; } #container { min-height: 100%; position: relative; height: 100%; min-width: 900px; overflow: hidden; } #body { padding-bottom: 100px; float: left; background-color: rgba(0,0,0,0.7); width: 750px; height: 400px; } #footer { position: absolute; bottom: 0px; width: 100%; height: 100px; } ``` HTML: ```

Accepted Answer

As amit said, you should put a `margin-bottom` for your `body` and use `min-height` instead of `height`:

```
body {
   min-height: 400px;
   margin-bottom: 100px;
   clear: both;
}
```

And you should remove height:100% from `<body>`

Hope this helps!

How to stop Sticky Footer from covering content...?

Solution

Problem