你如何得到100％高度的容器底部？

时间：2017-01-23 18:20:43

标签： html css yui-pure-css

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

这里和我想要实现的目标的形象：

enter image description here

小折射：

enter image description here

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

您应将父容器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>

答案 1 :(得分：0)

父级设置为var layout=SingleColumnLayout() collectionView.collectionViewLayout = layout ，因此子级与父级的高度相同。因此，如果您将父母的身高（display: flex;）设为100％，则孩子的身高也将达到100％。

＆＃13;
＆＃13; 
.pure-g
＆＃13; 
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%;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

你错过了这个：

.pure-g {
  height: 100%;
}
相关问题
最新问题