CODEWITHSUNDEEP
htmlcss
martin j
martin j

Reputation: 131

force footer bottom with responsive design

I have a footer that only stick to the bottom when the page is long, but if the page is too short the footer sticks at the middle of the page. I have seen a few methods where they set margin:0 auto -180px; in a .wrapper class. However this can be a problem since my footer height change depending on resolution (responsive design). also setting the .footer class position:fixed; and bottom:0; works, but it then overlap the content of the long pages.

My footer is not 100% done and I'm planning on making each of the .item classes side by side on big screens but below each other on smaller screens like phones. This will make the footer height even longer which is why I have a problem setting the height .footer height and .wrapper margin "static".

css:

.footer {
    width:100%;
    background-color:#23282c;
    position: relative;
    margin:auto;
    min-height:180px;
    z-index:15;
}

.footer-bottom-wrapper {
    display:inline-block;
    margin-bottom: 0;
    width:100%;
}
.footer-bottom {
    background-color:#1e2327;
    font-size:11px;
    line-height:25px;
    color:#777f8c;
    position:absolute;
    bottom:0;
    width:100%;
    height:25px;
    width:100%;
    z-index:9;
}



.item {
    position:absolute;
    left:220px;
    display:inline-block;
}

.i1 {
    position:relative;
    float:left;
    width:20%;
    padding-top:7px;
    margin-left:-210px;
    padding-right:190px;
    font-size:15px;
    display:inline-block;
}

.i2 {
    position:relative;
    float:left;
    width:20%;
    padding-top:7px;
    margin-left:-150px;
    padding-right:190px;
    font-size:15px;
    display:inline-block;
}

.i3 {
    position:relative;
    float:left;
    width:20%;
    padding-top:7px;
    margin-left:-150px;
    font-size:15px;
    display:inline-block;
}

.item h1 {
    color:#fff;
    border-bottom:1px solid #475f93;
    font-size:18px;
    text-align:left;
}

.item .p {
    color:#777f8c;
}

.footer-link {
    color:#777f8c;
    margin-left:5px;
    margin-right:5px;
}

.footer-link:hover {
    color:#fff;
}

wrapper and body CSS:

* { margin:0; padding:0; }
html { overflow:auto; height:100%; }
body { background-color: #e9ebee; margin:0; padding:0; font-size:10px; cursor:default; height:100%; }
body, html {font:13px "open sans",sans-serif;  overflow-x:hidden;}

/* Base Styles
********************************************************************* */
html {
  font-size: 62.5%;
  width: 100%;
  height: 100%;
}
body {
  background: #e9ebee;
  height: 100%;
  font-size: 1.5em;
  line-height: 1.6;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  color: #222;
  
}

footer.php:

<footer class="footer" id="footer">

    <div class="item i1">
        <h1>Subscribe</h1>
        <div class="p">
            <form method="POST" action="/assets/php/subscribe.php">
                <label>Subscribe to our newsletter!</label><br />
                    <input type="email" class="footer-input" name="sub-email" placeholder="E-mail">
                
                <div style="margin-top:5px;"></div>
                    <input type="submit" value="Subscribe" class="btn" name="subscribe" style="width:100%;"/>
            </form>
        </div>
    </div>
    

    <div class="item i2">
        <h1>Help</h1>
        <div class="p">
            Need any help?<br />
            You can find a help page<a href="/help" class="footer-link">here</a>.
        </div>
    </div>

    
    <div class="item i3">
        <h1>Server</h1>
        <div class="p">
            About our server
        </div>
    </div>


    <div class="footer-bottom-wrapper">
        <div class="footer-bottom">
            <div class="fl">
                <a class="footer-link" href="/help">Help</a>    |
                <a class="footer-link" href="/ads">Advertise</a>    |
                <a class="footer-link" href="/Rules">Rules</a>  |
                <a class="footer-link" href="/Terms-Of-Service">Terms Of Service</a> |
                <a class="footer-link" href="/credit">Credits</a>
            </div>
            <div class="footer-fr" style="padding-right:10px;">&copy; Copyright <?php echo $domain; ?> | 2015 - <?php echo date("Y") ?></div>
        </div>
    </div>
</footer>

    <!-- Script that requier bottom! -->
        <script type="text/javascript" src="/assets/script/notification.js"></script>
        <script type="text/javascript" src="/assets/script/level-bar.js"></script>


<?php if(isset($_SESSION['user'])){ ?>
      </div>
<?php }else{ ?>
    </div>
<?php } ?>

Upvotes: 3

Views: 6841

Answers (4)

Andy Tschiersch
Andy Tschiersch

Reputation: 3816

I often use a sticky footer which is position: absolute; with a fixed height (e.g. height: 120px;) in desktop mode. The content area get a padding-bottom accordingly to the footer height to prevent overlap.

In mobile mode the footer change from position: absolute; to position: relative;, and the height is now height: auto;. The padding-bottom must be removed from the content area also.

#content {
    padding-bottom: 120px;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
}
@media screen and (max-width: 767px) {
    #content {
        padding-bottom: 0;
    }
    #footer {
        position: relative;
        top: auto;
        left: auto;
        height: auto;
    }
}

Basic Example:

html,
body {
  margin: 0;
  height: 100%;
}
#page {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
#header {
  height: 50px;
  background: yellow;
}
#content {
  padding-bottom: 60px;
}
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: black;
  color: white;
}
@media (max-width: 400px) {
  #content {
    padding-bottom: 0;
  }
  #footer {
    position: relative;
    bottom: auto;
    left: auto;
    height: auto;
  }
}
<div id="page">
  <div id="header"></div>
  <div id="#content">small content</div>
  <div id="footer">footer content</div>
</div>

Upvotes: 2

Robin Wright
Robin Wright

Reputation: 303

What I tend to do is use position:fixed;bottom:0; and then add margin-bottom:footerHeightInPixels; to whatever the last element on the page is.

As you mentioned, you want to have things shift about with different sized viewports. You could make this work by using mulitple stylesheets for each screen size. E.G.

<link rel='stylesheet' media='screen and (max-width: 980px)' href='small.css' /> <link rel='stylesheet' media='screen and (min-width: 981px)' href='big.css' />

Upvotes: 0

Anubhav pun
Anubhav pun

Reputation: 1323

Try this in your css may it's help you. 

 html {
        min-height: 100%;
        position: relative;
    }
    .footer_box {
        bottom: 0;
        height: 70px;/*according to your height */
        position: absolute;
        width:100%;
        background-color:#23282c;
        position: relative;
        margin:auto;
        min-height:180px;
        z-index:15;
    }

Upvotes: 0

Arerrac
Arerrac

Reputation: 419

Try setting a min-height of html and body:

html, body {
    min-height: 100%;
}

Is footer a direct child of body?

Upvotes: 0

Related Questions