你如何让 div 到达容器底部的 100% 高度？

Question

如何让 div 以 100% 的高度浮动到底部？我一直在尝试并寻找答案，但没有任何效果。我想知道这是因为 Pure，还是我在做的其他事情。不确定。

这里是我想要实现的目标的图像：

小折射：

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

您应该将您的父容器 col-container 位置设置为 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>

Answer 2

parent 设置为 display: flex;，因此 children 与 parent 的高度相同。因此，如果您将 parent 的 (.pure-g) 高度设置为 100%，则 children 也将是 100% 高度。

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>

Answer 3

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

你错过了这个：

.pure-g {
  height: 100%;
}

你如何让 div 到达容器底部的 100% 高度？

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

html

css

yui-pure-css