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>

An issue you're possibly going to have moving forward is `height: 100%;`. Percentage heights require that the parent element have a height set on it. If the parent element's height is also a percent, then it's parent element will need a height set on it. This could continue all the way up to `` element if only percentage heights are used. — hungerstar, Jan 23 '17 at 18:29

Roljhon · Accepted Answer · 2017-01-23T18:46:58.253

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>

Also, if `position: relative;` is set to an ancestor of `.col-container` the percentage height you applied will likely fail without additional height setting. — hungerstar, Jan 23 '17 at 18:33
I updated the code with new image in the post. There's a small spacing error to the right of the right column. Any ideas on that? Thanks for the answer too, seems this is closest. — user2296112, Jan 23 '17 at 18:39
@user2296112 that space is from the absolute positioning. When an element is absolutely positioned it is taken out of the normal document flow (doesn't take up space) and it's dimensions are reduced to that of the content within the element. You would need to set a width on `.col-container`, i.e. `width: 100%;`, so it will take up the width of the parent element (along with it's child elements). — hungerstar, Jan 23 '17 at 18:43
@user2296112 hungerstar is right, didn't notice that since the editor screen is mall. code updated, it's up to you if you want to use it, just for the sake of learning though since there are a couple of ways to achieve this layout — Roljhon, Jan 23 '17 at 18:47
Spot on guys. You rock. All problems fixed, and learned something new. Thanks. — user2296112, Jan 23 '17 at 18:48

score 0 · Answer 2 · answered Jan 23 '17 at 18:31

The parent is set to display: flex; so the children will be the same height as the parent. So if you make the parent's (.pure-g) height 100%, the children will be 100% height, too.

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: relative;
}
.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>

score 0 · Answer 3 · answered Jan 23 '17 at 18:46

0

http://codepen.io/jakubrpawlowski/pen/ygXgVj

You are missing this:

.pure-g {
  height: 100%;
}

answered Jan 23 '17 at 18:46

Jakub Pawlowski

248
1
3
8

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

3 Answers3