如何为html页面的两半着色

Question

我使用材质css将页面分成两个全高列，一个是7个网格，另一个是5个网格。

我希望第一列的背景向下延伸。然而我所看到的是它填充颜色直到有元素的部分。我知道它是正确的但我如何使它拉伸列明智。我尝试了flexbox但它没有帮助。

HTML部分：

＆＃13;

＆＃13;

 .row .s7{
background-color: grey;
}

＆＃13;

  <div class="row">
    <div class="col s7 flex-container">
      first half
    </div>

    <div class="col s5">

    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

输出为 我希望greensection完全延伸到dow并填充页面列的一半

Answer 1

因为你没有给它高度 你可以用这个

＆＃13;

＆＃13;

.row .s7{
background-color: grey;
height:800px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
          
<div class="row">
    <div class="col s7 flex-container">
      first half
    </div>

    <div class="col s5">

    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

或删除身高：800px;并放置此

bottom:0;
top:0;
position:absolute;

或使用此

height:100vh;

Answer 2

如果您正在寻找纯粹的页面划分，并且您想要响应，则可以使用flexbox。

<强> HTML

<div class="container">
  <div class="first-half"></div>
  <div class="second-half"></div>
</div>

<强> CSS

* {
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  height: 1080px;
  width: 1920px;
}

.first-half {
  height: 100%;
  width: 100%;
  background-color: green;
}

.second-half {
  height: 100%;
  width: 100%;
  background-color: blue;
}