html - ul 和 li 非固定父级的 100% 高度

Question

我正在寻找获得 < ul > 的最简单方法它是 < li >元素到 < ul >'s 的 100% 高度 parent 。 parent 不是固定的(我试图避免这种情况，因此它在移动设备上很灵活)。这是 JSFiddle

基本上我希望红色框的高度为灰色框的 100%。

谢谢!

注意:我已经尝试过各种方法，但似乎没有什么能正常工作。

Answer 1

您需要做几件事。

1. 指定 .site-header 的高度，例如40px
2. li 的每个 parent 都需要 100% 高度
3. 使标题和导航容器内联

这应该可行

 h1 {
  margin: 0;
  display: inline;
}
.site-header {
  background: rgba( 0,0,0,0.5 );
  width: 100%;
  height: 40px;
}
.row {
  height: 100%;
}
.site-title {
  display: inline;
  font-family: 'Roboto Mono';
  font-weight: 100;
}
h1 {
  margin: 0;
  padding: 0;
  display: inline;
}
.site-nav {
  height: 100%;
  float: right;
}
ul {
  list-style-type: none;
  height: 100%;
  margin: 0;
}
li {
  background: red;
  float: left;
  height: 100%;
  text-align: center;
  width: 150px;
}