Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery

Height Problems

Post a Comment
I have a problem regarding height. I have a footer following the code bellow:

Solution 1:

I think this might be what you're looking for:

Demo: http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/

It's a simple script which makes your footer stick to the bottom of the page but once you add more content it wil go down with it. (demo)

This is an example using this script: (I also added a fixed navigation) html: 

<div id="wrapper">

    <div id="header">
        <div id="nav"></div>
        <div id="content_push" style="width: 100%; height: 50px;"></div> <!-- makes sure the first content doesn't dissapear beneeth the nav>
    </div><!-- #header -->

    <div id="content">
        Copy this to add content<br><br><br><br>
        Copy this to add content<br><br><br><br>
        Copy this to add content<br><br><br><br>
        Copy this to add content<br><br><br><br>
    </div><!-- #content -->

    <div id="footer">
    </div><!-- #footer -->

</div><!-- #wrapper -->

css:

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:0px;

}
#nav{
    width: 100%;
    height: 50px;
    position: fixed;
    background-color: green;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

Try it out: https://jsfiddle.net/krjoqfru/


Solution 2:

I don't know if I understand you correctly. You wan't sticky footer? 

html, body { height: 100%; }
#wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; }
#footer, #push { margin: 0 auto; height: 50px; }
<body>
  <div id="wrap">
    your content goes here
    <div id="push"></div>
  </div>
  <div id="footer">Your footer</div>
</body>

Solution 3:

I hope this can help you.

* { margin: 0; padding: 0; }	
body { height:100%; width: 100%; position: absolute; }
header { height: 50px; width: 100%; position: fixed; }
.principal { min-height: 100%; width: 100%; }
footer { height:50px; width:100%; }
<header style="background: green;"></header>
<div class='principal' style="background: red;"></div>	
<footer style="background: blue;"></footer>

You may like these posts

Post a Comment for "Height Problems"