如何使 div 的高度达到父元素的 100%？

Question

如何使 div 的高度达到父元素的 100%？

4

我需要将我的四列类设置为容器高度的100％。但我没有找到一个可行的示例。我应该如何添加容器和四列类的css，以使子div的高度与父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; }

- Tomas Bajoras

你可能想在JSFiddle上添加一个fiddle（https://jsfiddle.net）或在Codepen上添加一个pen（http://codepen.io），这样我们就可以玩弄代码，更快地找到解决方案 :) - user5404864

@Yik Jin https://jsfiddle.net/77mvztp0/ - Tomas Bajoras

使用 em 和 rem 我猜。 - PythonProgrammer

另外，请不要使用内联CSS，它会很混乱。 - PythonProgrammer

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fazil Abdulkhadar · Answer 1

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

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

- chrisv · Answer 2

嗯...你想让div内的列与它们所在的div一样高吗？

如果你想要：这里有一个丑陋的JavaScript解决方案。给你的div添加一些ID，并使用以下代码：

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

注意：不要认为这是推荐的方法，但至少它能够工作...

编辑:

顺便说一句: 如果父元素有固定的大小，你可以在CSS中添加它，然后设置高度为100%。请查看这个fiddle链接：https://jsfiddle.net/77mvztp0/2/

我在这个fiddle链接里唯一做的事情就是给父元素添加了一个id:"container"，并且给子元素添加了一个id:"makeMeBigger"。然后我在父元素上添加了200px的高度，在子元素上添加了100%的高度！

编辑结束。

新的编辑：

你试过这个吗：

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

我在这里做的是给父级 div 添加了一个 overflow 属性，然后在子元素上设置高度为 100%：

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

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

- Rafah Mehfooz · Answer 3

如果您只想让列的高度等于容器的高度，而不是将其设置为100％，则可以以像素为单位为容器和列设置高度，例如：height:75px;