Height Problems

Question

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>

Html5 Info

Height Problems

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Height Problems"