[SOLVED] Height not working on body with skeleton

Height not working on body with skeleton

It's my first question on Stack and I hope that someone can help me with this.

I have a problem with my page that I'm building with Skeleton. The problem is that I cannot set "height" to 100%. I want my footer to be always on the bottom so the rest of my page stretches to full window. How do I do that?

Here is the 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 is pretty standard:

<html>

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

</html>

None of this is working. I've also tried to set height: 100vh, but again no luck. I've read quite a few topics here and all posted solutions didn't change a thing.

Solution

There's countless ways to achieve this. Here's how to do it with Flexbox. Google for "sticky footer" to 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>