MeltingDog MeltingDog - 15 days ago 8
CSS Question

Make <a> tag to take 100% height of inline-block parent

I want to make

#menu a
tag take up 100% of the height of its parent element. The parent element forms part of a horizontal list, so has
display: inline-block
set.

However, the
a
tag does not extend the full height of parent div, despite me setting it to
display: block; height: 100%;
.

See here: https://jsfiddle.net/wqec16we/12/

Would anyone know if this can be done?

#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

You can add line-height propert with a value, for example,

#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>