html - 想要使用 Bootstrap 将一个完整页面拆分为四个相同大小的 div

Question

我在使用 height: 100% 和内容设置为 25% 25% 25% 25% 时感到困惑，为什么它不起作用(在我的浏览器中，每个 div 看起来都很小，而且 100% 没有填满整个页面)。任何人都可以在这里找到我的错误吗？

我的 HTML 代码:

<div class="container-fluid" style="height: 100%">
        <div class="row" style="height: 25%;">
            <div class="col-xs-4 col-md-4" style="background-color:red;">
                .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            .col-xs-3 .col-md-5
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>

    <div class="row" style="height: 25%;">
        <div class="col-xs-4 col-md-4" style="background-color:red;">
            .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            .col-xs-3 .col-md-5
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>

    <div class="row" style="height: 25%;">
        <div class="col-xs-4 col-md-4" style="background-color:red;">
            .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            <h1 class="h1Title">Azkaban</h1>
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>

    <div class="row" style="height: 50%;">
        <div class="col-xs-4 col-md-4" style="background-color:red;">
            .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            .col-xs-3 .col-md-5
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>
</div>

我已经读过:How can I make Bootstrap columns all the same height?

但我仍然不明白为什么 100% -> 25% 每个 div 在这里不起作用？

输出:

Answer 1

.container-fluid {
   height: 100vh;
}

.row .col-xs-4.col-md-4 {
  height: 100%;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      <h1 class="h1Title">Azkaban</h1>
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
</div>