css - div容器适配屏幕高度

Question

我创建了以下布局:

我想要实现的是，红色和蓝色容器在 wrapper 内的高度为 100%。到目前为止，这是 HTML 代码:

@extends('master.main')

<!-- Section Insert for pageTitle -->
@section('pageTitle')
    title
@endsection

<!-- Section Insert for content -->
@section('content')
    <div class="menu-bar"></div>
    <div class="main-content">
        <div class="row row-no-padding">
            <div class="col-md-7">
                <div class="content-container-left">test</div>
            </div>
            <div class="col-md-5">
                <div class="content-container-right">test</div>
            </div>
        </div>
    </div>
@endsection

还有样式:

#main-content-wrapper {
  height: 100%;
  margin-left: 60px;
  background-color: #f7f8f9;
}

.main-content {
  margin-left: 15px;
  width: 100%;
  height: 100%;
}

.content-container-left {
  background-color: red;
  float: left;
  width: 100%;
  padding: 15px;
}

.content-container-right {
  background-color: blue;
  float: left;
  width: 100%;
  padding: 15px;
}

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

我试图理解如何实现这一目标的逻辑，但仍然存在问题，因为我还没有这方面的最丰富经验。我想到了 100% 的高度设置，这是行不通的。但我不明白这是为什么？

Answer 1

如果父元素是静态的，那么高度将是自动的。如果您有父元素 position: absolute 并设置固定高度，您将看到 100% 表示它将填充 block 元素的父元素的高度。

请注意，默认情况下， block 级元素位置是静态的(例如 div、h1、h2)。

请提供此文档:http://www.w3.org/TR/CSS2/visudet.html#the-height-property