span 100% height of parent button

Heights apply only if the heights are defined properly for the ancestors. If you want the height to work, that's a tricky one. You can use one of my favourites, but you need to make sure it works in all the cases:

  1. Give position: relative; to the parent.
  2. Give position: absolute; to the element that needs full height and width.
  3. Give the element, 0 values for all the sides.

Snippet

.parent {
  position: relative;
  width: 100px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: skyblue;
}
<div class="parent">
  <span class="child"></span>
</div>

In the above snippet, it is noted that this can also work, if you give:

.parent {
  position: relative;
  width: 100px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  width: 100%;
  height: 100%;
  background: skyblue;
}
<div class="parent">
  <span class="child"></span>
</div>

One good part about this approach is, you don't need to use the dangerous calc:

.parent {
  position: relative;
  width: 150px;
  height: 50px;
  background: red;
}
.parent .child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 60px;
  background: skyblue;
}
<div class="parent">
  <span class="child"></span>
</div>

Note: On a related note, you can also have a look at this question and answer: Calc() alternative to fixed side bar with content?

Tags:

Css

Button

Height

Recent Posts