How to make div height 100% of his parent?

Question

I need to make my four columns classes to 100% height of container height. But I didn't find a example, which works. How should I add css for container and four columns classes to make the children div height the same like father?

   <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

Add display: inline-block; property to the column class.

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

Answer 2

如果您只想实现列的高度应等于容器的高度，除了将其设为 100%，您还可以以像素为单位设置容器和列的高度，例如height:75px;

Answer 3

You can use flex-box, which is based in CSS3.

Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

Uhm... You want the columns inside the div to be as high as the div they are in?

If you want: here's an ugly solution in Javascript. Add some ID's to your divs, and use this code:

<script>
    function load() {
        var element = document.getElementById('container');
        var resizeThis = document.getElementById('setThisToContainerHeight');
        resizeThis.style.height = element.offsetHeight+'px';
    }
    window.onload = load;
</script>

NB: Don't think this is recommended way, but at least it works...

---

Edit:

By the way: If you have a fixed size on the parent div, you could add it in the CSS and then set height 100%. Check this fiddle: https://jsfiddle.net/77mvztp0/2/

The only thing I've done in this fiddle is to add an id: "container" to the parent div, and an id: "makeMeBigger" to the children div. Then I added height 200px on parent and height 100% on child!

Edit END.

---

NEW Edit:

Have you tried this:

https://jsfiddle.net/77mvztp0/3/

What I've done here is to add an overflow property to parent div and then setting height to 100% on children:

.container {
    overflow: hidden;
    width: 100%;
}

.four-columns {
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

---