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%;}

Answer 2

如果您只希望实现您的列的高度应该等于容器的高度，除了使其为100％之外，您可以设置容器和列的高度（以像素为单位），例如height:75px;

Answer 3

您可以使用基于CSS3的flex-box。

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

Answer 4

嗯......您希望div中的列与它们所在的div一样高吗？

如果你想：这是一个丑陋的Javascript解决方案。将一些ID添加到您的div，并使用此代码：

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

注意：不要认为这是推荐的方式，但至少它有效......

编辑：

顺便说一句：如果你在父div上有一个固定的大小，你可以在CSS中添加它，然后将高度设置为100％。检查这个小提琴：https://jsfiddle.net/77mvztp0/2/

我在这个小提琴中唯一做的就是向父div添加一个id：“container”，并向子div添加一个id：“makeMeBigger”。然后我在父母身上加了200px身高，在孩子身上加了100％身高！

编辑END。

新编辑：

你试过这个：

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

我在这里做的是向父div添加一个溢出属性，然后在子节点上将高度设置为100％：

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

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

如何使div高度100％的父母？

4 个答案: