Cannot create footer with CSS

I am trying to attach a div to the bottom of the page. This page is not scrollable, but I cannot set top by pixel because it needs to be responsive to screen size. All I want is a div at the bottom of the page that takes up 100% of the horizontal space and 20% of the vertical space.

What I've tried:

Making parent relative and child absolute.
Setting parent's min-height: 100%

Here is my code:

<html>
    <head>
        <title>Forget It</title>
        <link rel="stylesheet" href="../static/styles.css">
    </head>
    <body>
        <div class='parent'>
            <div class='ground'></div>
        </div>
    </body>
</html>

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #96b4ff;
}

.parent {
    position: relative;
    min-height: 100%;
}

.ground {
    position: absolute;
    height: 20%;
    bottom: 0;
    background-color: #2cb84b;
}

Any ideas? Thanks!

Solution

Just apply width: 100%; to .ground to make the div take full width.

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #96b4ff;
}

.parent {
  position: relative;
  min-height: 100%;
}

.ground {
  position: absolute;
  height: 20%;
  width: 100%;
  bottom: 0;
  background-color: #2cb84b;
}

<div class='parent'>
  <div class='ground'>footer</div>
</div>