'How to get fixed margin between body and footer

I am new to CSS and am trying to set up a page so that there is always a fixed margin / space between the page's main content (sidebar / sections) and the footer (e.g. 120px) which should work cross-browser.
Also, in case there is very little content on a page the footer should always appear at least at the bottom of the (visible) screen.

I made multiple attempts by applying a class footer, including the following, but the margin is always ignored.

.footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom
}
.footer:before {
    clear: both;
    display: block;
    height: 120px;
    min-height: 120px;
}
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- ... -->
    </head>
    <body>
        <nav>
            <!-- ... -->
        </nav>
        <section id="sidebar">
            <!-- ... -->
        </section>
        <section id="main">
            <!-- ... -->
        </section>
        <footer class="footer">
            <div>Some text</div>
        </footer>
    </body>
</html>

Can someone help me with this?
Also, if anything should be changed regarding my HTML please let me know as well.

htmlcssfooter


Solution 1:[1]

To add a margin between the body and footer, just add this to the style of the footer section: padding:20px 0px 0px 0px;

Keeping the footer at the bottom is more complicated. Try something like this for css:

html, body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper{              /*create a div around whole html body
    min-height:100%;
    position:relative;
}

#main{
    padding-bottom:100px; /* Height of the footer element */
}

#footer {
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    color: #333;
}

Solution 2:[2]

Why you use ":before"?

Your css should look like this:

.footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom;
    margin-top: 120px;
}

Try this example (works fine for me). If it not works - make sure you use css reset.

<!DOCTYPE html>

    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <!-- ... -->
        </head>
        <body>
            <nav style="background:grey;height:100px;">
                <!-- ... -->
            </nav>
            <section id="sidebar" style="background:green;height:100px;">
                <!-- ... -->
            </section>
            <section id="main" style="background:red;height:100px;">
                <!-- ... -->
            </section>
            <footer class="footer" style="background:blue;">
                <div>Some text</div>
            </footer>
        </body>
    </html>

<style>
.footer {
    color: #333;
    font-size: 11px;
    text-align: center;
    vertical-align: bottom;
    margin-top: 120px;
}

</style>

Solution 3:[3]

just give styling to body with margin 0px.

  body{
      margin: 0px;
  }

Solution 4:[4]

I know I'm a little late to the party, but you could also just guesstimate with some set units for vh. Hacky, but it works in a pinch.

.wrap {
    min-height: 70vh;
}

<div class="wrap">
    <section id="chapterone">
        <p>Lorem ipsum...</p>
    ...
</div>

<footer class="footer">
    <a href="/">Home</a>
    ...
</footer>

Solution 5:[5]

Solved!

In my case, I added id to the previous div (like "body") to the div above the footer div, as follows:

<div id="body" class="container">
   ...
</div>

<div class="row footer-row-bg">
       ...     
</div>

Then, in my CSS file, I added padding-bottom:20px; for that id as follows:

#body{
    padding-bottom:20px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Muhammad Irfan
Solution 4 Ben Dod
Solution 5 vagdevi k

Related Questions