html - 使 标记采用内联 block 父级的 100% 高度

Question

我想让#menu a标签占据其父元素高度的100%。父元素构成水平列表的一部分，因此设置了 display: inline-block。

然而，a 标签并没有扩展父 div 的整个高度，尽管我将其设置为 display: block;高度:100%；.

请参见此处:https://jsfiddle.net/wqec16we/12/

有人知道这是否可以做到吗？

#wrapper {
  width: 100%;
  border: 1px solid #ccc;
  overflow: auto;
  text-align: right;
}

#hi, #menu {
  display: inline-block;
  height: auto;
}

#hi {
  font-size: 28px;
}

#menu {
  height: 100%;
  width: 60px;
}

#menu a {
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  background-color: #ccc;
}

Answer 1

您可以添加带有值的行高属性，例如，

#menu a {
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  background-color: #ccc;
  line-height:40px;  /*MODIFICATION*/

}

#wrapper {
  width: 100%;
  border: 1px solid #ccc;
  overflow: auto;
  text-align: right;
  
}

#hi, #menu {
  display: inline-block;
  height: auto;
  
}

#hi {
  font-size: 28px;
  
}

#menu {
  height: 100%;
  width: 60px;
  
}

#menu a {
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  background-color: #ccc;
  line-height:40px; /*MODIFICATION*/
  
}

<div id="wrapper">

<div id="hi">
HI
</div>

<div id="menu">
 <a href="#">Menu</a>
</div>

</div>