How to get fixed margin between body and footer

html css footer
keewee279 picture keewee279 · May 31, 2015 · Viewed 40.1k times · Source

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.

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

Answer

AndreiDMS picture AndreiDMS · May 31, 2015

This should help:

html, body {
    height: 100%;
}
body {
    margin:0px;
    padding: 0px;
}
.wrap {
    height: auto;
    margin: 0 auto -80px; /* footer height + space */
    min-height: 100%;
    padding: 0 0 80px; /* footer height + space */
    box-sizing: border-box;
    overflow: auto;
}
.footer {
    background-color: #111111;
    color: #eeeeee;
    border-top: 1px solid red;
    height: 60px;  /* footer height */
    padding-top: 20px;
    display: block;
    margin-top: 20px; /* space between content and footer */
    box-sizing: border-box;
    position: relative;
    width: 100%;
}
<body>
    <div class="wrap">
        <nav>
            <!-- ... -->
        </nav>
        <section id="sidebar">
            <!-- ... -->
        </section>
        <section id="main">
            <!-- ... -->
            
        </section>
    </div>
    <footer class="footer">
        <div>Some text</div>
    </footer>
</body>

Related questions

Bootstrap 3 Flush footer to bottom. not fixed

I am using Bootstrap 3 for a site I am designing. I want to have a footer like this sample. Sample Please note that I don't want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem. I just want it …

Read More
How to align footer (div) to the bottom of the page?

Can anyone explain how to align a footer div to the bottom of the page. From the examples I've seen, they all show how to make the div stay visible at the bottom, no matter where you've scrolled the page. …

Read More
Fixed footer in Bootstrap

I'm trying out Bootstrap and I was wondering, how I can fix the footer on the bottom without having it disappear from the page if the content is scrolled?

Read More