DEVHIDE
Login Or Sign up

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

1k Views Asked by At

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:

enter image description here

Small refraction:

enter image description here

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/[email protected]/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>

html css yui-pure-css
Original Q&A
3

There are 3 best solutions below

6
Roljhon On BEST ANSWER

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/[email protected]/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>

0
Michael Coker On

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/[email protected]/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>

0
Jakub Pawlowski On

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

You are missing this:

.pure-g {
  height: 100%;
}

Related Questions in HTML

Related Questions in CSS

Related Questions in YUI-PURE-CSS

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.