Web Develop - Flexible Footer
Table of Contents
#
Web Develop - Flexible Footer
Sometimes we think footer must fixed in website bottom or put it in last of content.
I provide a idea may be a good way. Content less browser view height, footer fixed in bottom. When content too much over browser view height, footer be put last of content.
##
Feature
- flexible
- only use CSS
##
Usage
min-height: calc(100% - <footer height>);
#hd {
height: 50px;
background: #aaa;
/*display: none;*/
}
#bd {
text-align: center;
min-height: calc(100% - 50px); /* important */
background: #ccc;
}
#content {
padding-bottom: 60px;
}
#footer {
position: relative;
bottom: 50px;
text-align: center;
height: 50px;
background: #999;
}
50px is footer height
<header id="hd">
<h1>Head</h1>
</header>
<article id="bd">
<section id="content">
<button>build content</button>
<h1>Content</h1>
<div id="loop"></div>
</section>
</article>
<footer id="footer">
<h2>Footer</h2>
</footer>