How do you get div to bottom of container with 100% height?

Question

How do you get the div to float to the bottom with 100% height? I've been trying, and searching answers, but nothing is working. I wondered if it was because of Pure, or something else I was doing. Not sure.

Here and image of what I'm trying to achieve:

Small refraction:

html {
  height: 100%;
}
body {
  background-color: black;
  color: white;
  font-family: 'Cinzel', serif;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: .8em;
  height: 100%;
  margin: 0;
}
#CharacterSpecific {
  min-height: 20%;
  width: 100%;
  border: 1px solid #0f0f0f;
  position: absolute;
  bottom: 0;
}
.col-container i {
  margin-right: 2px;
}
.col-container {
  padding: 12px;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}
.tab-selected {
  border-top: 1px solid #ce9f29;
  border-left: 1px solid #ce9f29;
  border-right: 1px solid #ce9f29;
  padding: 4px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  color: #ce9f29;
  margin-left: 4px;
}
.tab {
  color: #716109;
  margin-left: 4px;
}
.clear-fix {
  clear: both;
}
.gold {
  color: #ce9f29;
}
.pure-g {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
<div class="pure-g">
  <div class="pure-u-6-24">
    <p>Thirds</p>
  </div>
  <div class="pure-u-12-24">
    <p>Thirds</p>
  </div>
  <div class="pure-u-6-24">
    <div class="col-container">
      <span class="tab"><i class="fa fa-user"></i>Character</span>
      <span class="tab-selected"><i class="fa fa-cube"></i>Inventory</span>	
      <span class="tab"><i class="fa fa-home"></i>Guild</span>
      <hr class="gold">
      <span class="tab"><i class="fa fa-envelope"></i>Messages</span>
      <span class="tab"><i class="fa fa-group" aria-hidden="true"></i>Players</span>
      <hr class="gold">
      <div class="clear-fix"></div>
      <div id="CharacterSpecific">
        <p>goober goober</p>
      </div>
    </div>
  </div>
</div>

Answer 1

You should set your parent container col-container position to absolute

html {
  height: 100%;
}
body {
  background-color: black;
  color: white;
  font-family: 'Cinzel', serif;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: .8em;
  height: 100%;
  margin: 0;
}
#CharacterSpecific {
  min-height: 20%;
  //width: 100%;
  border: 1px solid #0f0f0f;
  position: absolute;
  bottom: 0;
}
.col-container i {
  margin-right: 2px;
}
.col-container {
  padding: 12px;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  width:100%;
}
.tab-selected {
  border-top: 1px solid #ce9f29;
  border-left: 1px solid #ce9f29;
  border-right: 1px solid #ce9f29;
  padding: 4px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  color: #ce9f29;
  margin-left: 4px;
}
.tab {
  color: #716109;
  margin-left: 4px;
}
.clear-fix {
  clear: both;
}
.gold {
  color: #ce9f29;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1  /jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
<div class="pure-g">
  <div class="pure-u-6-24">
    <p>Thirds</p>
  </div>
  <div class="pure-u-12-24">
    <p>Thirds</p>
  </div>
  <div class="pure-u-6-24">
    <div class="col-container">
      <span class="tab"><i class="fa fa-user"></i>Character</span>
      <span class="tab-selected"><i class="fa fa-cube"></i>Inventory</span>	
      <span class="tab"><i class="fa fa-home"></i>Guild</span>
      <hr class="gold">
      <span class="tab"><i class="fa fa-envelope"></i>Messages</span>
      <span class="tab"><i class="fa fa-group" aria-hidden="true"></i>Players</span>
      <hr class="gold">
      <div class="clear-fix"></div>
      <div id="CharacterSpecific">
        <p>goober goober</p>
      </div>
    </div>
  </div>
</div>