ul和li 100％非固定父母的身高

Question

我正在寻找一种最简单的方法，将< ul >及其< li >元素设置为< ul >'s父级的100％高度。父母不是固定的（我试图避免这一点，因此它在移动设备上是灵活的）。这是JSFiddle

基本上我希望红色框子是灰色框的100％高度。

谢谢！

注意：我已经尝试了各种各样的东西，它似乎没有什么工作正常。

Answer 1

您需要做几件事。

1. 指定.site-header的高度，例如40像素
2. li的每位家长需要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;
}