Menu
I have a problem regarding height. I have a footer following the code bellow:
<html>
<body>
<div class='wrap'>
<div class=principal></div>
<div class='clear'></div>
<footer><img alt='Logotype' /></footer>
</div>
</body>
</html>
html,body{
height:100%;
};
.wrap{
height:auto!important;
height:100%;
min-height:100%;
width:100%;
}
.clear{
clear:both;
}
footer{
position:absolute;
bottom:0;
height:50px;
width:100%;
}
There's another way that is putting margin: 0 auto -50px in the .wrap, and put footer outside the wrap.
I need the .principal to have 100% of the height when there's not so much content because I have a component that inject in the .principal a <div style='height:100%>insert text and graphics/charts here</div>.
See examples bellow to understand better:
Image 1:
Content 100%
I need the content (.principal) to have 100% of the height because of the component. I have a menu that opens when clicked, and that should have the size of the content (.principal), I want the footer in the bottom of the page.
Image 2:
Scrolling Content
If there's more content (due to text or something) I want a scroll and the footer disappear, and the header fixed.
Image 3:
Image
At the bottom of the scroll, it should appear the footer. When the menu is open the menu should have the height of the size of the displayed content (in this case the height = window-height-footer).
So there's a way that an element can have 100% of the height, but when there's a lot of content it's expands?
Obstacles:
418
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/
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
