html - 具有相同高度的 div 和 span

Question

我希望我的跨度为“30”，其高度与包含它的 div 的垂直线高度相同。

#divDay {
font-family: Arial;
font-size: 44px;
border-right: 2px solid #000;
margin-bottom: 6px;
margin-top: 10px;
height: 100%
}

#divDate {
font-family: Arial;
font-size: 18px;
margin-bottom: 6px;
margin-top: 10px;

}

#divHeader{
border-bottom: 2px solid #000;
}


<div class="row">
    <div id="divHeader" class="col-xs-12">
        <div id="divDay" class="col-xs-2">
            <span>30</span>
        </div>
        <div id="divDate" class="col-xs-10">
            <div class="row">
                <span style="margin-left: 8px">Monday</span>
            </div>
            <div class="row">
                <span style="margin-left: 8px">April 2016</span>
            </div>
        </div>
    </div>                   
</div>

https://jsfiddle.net/h1m80Lv8/

非常感谢您的帮助。

Answer 1

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#divDay {
  font-family: Arial;
  height: 100% 
}

#divDate {
  border-left: 2px solid #000;
  font-family: Arial;
  font-size: 18px;
  margin-bottom: 6px;
  margin-top: 10px;
}
#divDay span { position:absolute;font-size: 72px;margin-top:-15px;}
#divHeader{
  border-bottom: 2px solid #000;

}

<div class="row">
  <div id="divHeader" class="col-xs-12">
    <div id="divDay" class="col-xs-2">
      <span>30</span>
    </div>
    <div id="divDate" class="col-xs-10">
      <div class="row">
        <span style="margin-left: 8px">Monday</span>
      </div>
      <div class="row">
        <span style="margin-left: 8px">April 2016</span>
      </div>
    </div>
  </div>                   
</div>