html - CSS For Variable Height Footer that Floats to Bottom of Page (Not Viewport) -


i'm working on react app , trying create footer floats bottom of page (not viewport) if there not enough content fill space. also, footer height vary browser hits media breakpoints.

here's high-level overview of html:

<div id="root">   <div data-reactroot id="app">     <div id="modal">       ...     </div>     <div id="header">       ...     </div>     <div id="container">       ...     </div>     <footer id="footer">       <nav class="navbar navbar-light navbar-fixed-bottom bg-faded">         <div class="container">           <div class="row">             <div class="col-md-4">               <a class="nav-link" href="/privacy-policy">privacy policy</a>             </div>             <div class="col-md-4">               <a class="nav-link" href="/terms-of-use">terms of service</a>             </div>             <div class="col-md-4">               <a class="nav-link" href="/contact-us">contact us</a>             </div>           </div>         </div>       </nav>     </footer>   </div> </div> 

here's relevant css (note current css prevents page overscrolling - removed failed attempts solve issue):

#footer {   margin-top: 10px;   text-align: center; }  html, body {   margin: 0;   height: 100%; }  html {   overflow: hidden; }  body {   overflow: auto; }  #root, #app {   height: 100%; } 

also, please note i've found gazillion similar questions issue on stack, literally none stipulate footer variable height , footer isn't sticky (i.e. positioned @ bottom of viewport).

any appreciated!

so, i'm not 100% sure understand question, going repeat understanding.

  1. you want footer below rest of content
  2. if page less size of viewport, want footer @ bottom of viewport
  3. if page greater size of viewport, footer should directly below rest of content.

assuming case, think simplest way solve set min-height on #app @ least 100vh , use flexbox expand container fill additional space if exists.

given current html structure, like:

#app {   display: flex;   flex-direction: column;   min-height: 100vh; }  #container {   flex-grow: 1; } 

you can see in action here: https://codepen.io/kball/pen/yxmgbl

if understanding of question/desired outcome incorrect, please let me know , i'll take pass @ it.


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -