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: 

<divid="wrapper"><divid="header"><divid="nav"></div><divid="content_push"style="width: 100%; height: 50px;"></div><!-- makes sure the first content doesn't dissapear beneeth the nav>
    </div><!-- #header --><divid="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 --><divid="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><divid="wrap">
    your content goes here
    <divid="push"></div></div><divid="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%; }
<headerstyle="background: green;"></header><divclass='principal'style="background: red;"></div><footerstyle="background: blue;"></footer>

Post a Comment for "Height Problems"