html - Height not working on body with skeleton -


it's first question on stack , hope can me this.

i have problem page i'm building skeleton. problem cannot set "height" 100%. want footer on bottom rest of page stretches full window. how do that?

here code:

html {     font-size: 62.5%;     min-width: 100%;     width: 100%;     max-width: 100%;     min-height: 100%;     height: 100%;     max-height: 100%; }  body {     font-size: 1.5em;     line-height: 1.6;     font-weight: 400;     font-family: 'lato', sans-serif;     color: #ffd6ed;     background-color: #1d003e;     min-width: 100%;     width: 100%;     max-width: 100%;     min-height: 100%;     height: 100%;     max-height: 100%; }

html pretty standard:

<html>  <body>     <header>         <div class="container">             <div class="rows">                 <div class="twelve columns">                     content                 </div>             </div>         </div>     </header> </body>  </html>

none of working. i've tried set height: 100vh, again no luck. i've read quite few topics here , posted solutions didn't change thing.

there's countless ways achieve this. here's how flexbox. google "sticky footer" find more.

body {    margin: 0;    display: flex;    min-height: 100vh;    flex-direction: column;  }  main {    flex: 1;  }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />    <body>    <main class="container">      <header>        <div class="rows">          <div class="twelve columns">            content          </div>        </div>      </header>    </main>    <footer>      <div class="container">        hello there!      </div>    </footer>  </body>


Comments

Post a Comment