Html 如何生成整页大小的引导div？_Html_Css_Bootstrap 4

Html 如何生成整页大小的引导div？

html css bootstrap-4

Html 如何生成整页大小的引导div？,html,css,bootstrap-4,Html,Css,Bootstrap 4,我需要制作一个整页大小的div背景所以我有两列：第9列为灰色，第3列为蓝色。以下是两个COL的代码： @媒体打印{ @页面{ 尺寸：自动；保证金：0； } } 测试整版标题标题日期喋喋不休从div中的类中删除h-100。参考工作代码测试整版标题标题日期喋喋不休 h-100等级适用高度：100%！重要的，并且如果父元素也具有显式高度，则仅使用百分比表示的高度。使用您自己的类，并通过该类应用100vh- <html> <he

我需要制作一个整页大小的div背景

所以我有两列：第9列为灰色，第3列为蓝色。以下是两个COL的代码：

@媒体打印{
@页面{
尺寸：自动；
保证金：0；
}
}


测试整版


标题

标题

日期


喋喋不休

从div中的类中删除h-100。参考工作代码


测试整版


标题

标题

日期


喋喋不休

h-100等级适用

高度：100%！重要的，并且如果父元素也具有显式高度，则仅使用百分比表示的高度。使用您自己的类，并通过该类应用100vh-
<html>

<head>
  <title>Test Full Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-9" style="background-color:#F8F8FF;">
        <div style="margin-top: 20px;">
          <div class="row">
            <div class="col-11">
              <br />
              <h4>Title</h4>
              <hr>
            </div>
          </div>
          <div class="row" style="padding-left: 1.5rem;">
            <div class="col-6">
              <strong>Title</strong>
              <p align="justify">
                <span>Date</span>
              </p>
              <p align="justify">
                Blablabla
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3" style="background-color:red;">
      </div>
    </div>
  </div>
</body>

</html>