html - 如何使div高度为他父级的100%？

Question

我需要将我的四列类设置为容器高度的 100%。但我没有找到一个有效的例子。我应该如何为容器和四列类添加 css 以使子级 div 高度与父级相同？

   <div class="container">
    <div class="four columns">
      <h4 class="text-white">{{$restaurant->restourant_name}}</h4>
      <h6 class="text-white"> <b>{{$restaurant->restourant_address}}</b></h6>
      <h6 class="text-white">Tel. <b>{{$restaurant->restaurant_phone}}</b></h6>
      <h6 onclick="openMap();" class="text-green" style="cursor:pointer"><b>{{ trans('restaurant.map') }}</b></h6>
    </div>

    <div class="four columns" style="display:flex; " >
      <div class="two columns" style="width:100%; height:100%; display:flex; margin: auto; ">
        <div style="width:20%; margin: auto;">
          <img style="vertical-align:middle" src="img/clockWhite.png">
        </div>
        <div style="width:80%;">
          <div style="height:50%; border-bottom: 4px dotted  ">
         {{ trans('restaurant.work_hours') }}
          </div>
          <div style="height:50%; white-space:nowrap">
          @if ($restaurant->work_start == null )
           <b>{{ trans('restaurant.closed') }}</b>
          @else
            {{substr($restaurant->work_start,0,-3)}} - {{substr($restaurant->work_end,0,-3)}}
          @endif
          </div>
        </div>
      </div>
      <div class="two columns" style="width:100%; height:100%; display:flex; margin: auto; ">
        <div style="width:20%; margin: auto;">
          <img style="vertical-align:middle" src="img/clockWhite.png">
        </div>
        <div style="width:80%;">
          <div style="height:50%; border-bottom: 4px dotted white;">
         {{ trans('restaurant.delivery_hours') }}
          </div>
          <div style="height:50%; white-space:nowrap">
          @if ($restaurant->delivery_start == null )
           <b>{{ trans('restaurant.no_delivery') }}</b>
          @else
            {{substr($restaurant->delivery_start,0,-3)}} - {{substr($restaurant->delivery_end,0,-3)}}
          @endif
          </div>
        </div>
      </div>
    </div>
 </div>

.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box; }
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box; }

Answer 1

添加 display: inline-block; 属性到列类。

.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box; 
    display: inline-block;
    height: 100%;
    width: 100%;}