i have similar problem can found here. couldn't make work or didnt understand fully.
my problem im trying resolve - want content background reach footer if there isnt enough content displayed. created simple fiddle can found here. can see there isnt enough content reach footer , there "blue" space between content , footer. make space grey.
html :
<div class=blue>header here</div> <p>logo here</p> <div class="blue">navigation bar here</div> <div class="content"> no content. </div> <div class="footer">footer here</div> css:
.blue { color: #ffffff; background-color: #294a70; display: block; float: none; width: 400px; margin: 0 auto; text-align: center; } p { text-align: center; color: #ffffff; } .content { background-color: #e6e6e6; display: block; float: none; margin: 0 auto; overflow:hidden; width:400px; margin-bottom:30px; } .footer { color: #ffffff; background-color: #294a70; display: block; float: none; width: 400px; margin: 0 auto; text-align: center; position: absolute; bottom: 0; left: 0; right: 0; height:30px; } body { margin:0; padding:0; font-family: 'open sans', sans-serif; line-height: 1.5; font-size: 14px; overflow-x:hidden; background-image:url('http://www.planwallpaper.com/static/images/alien_ink_2560x1600_abstract_background_1.jpg'); min-height: 100%; } html { position:relative; min-height: 100%; } all appreciated!
use css3 calc() function
the trick is, if know height of header & footer, can use function vh units, 100vh gives screen height, substract height of hearder & footer it.
e.g.
if header 80px & footer 40px, i.e. total 120px, use
.content{ min-height: calc(100vh - 120px); } the purpose of using min-height if content not present atleast height applied, if there more content screen div expanded fit accordingly.
updated jsfiddle:
Comments
Post a Comment