容器 div 没有拉伸到父级的全高 [重复]答案

【问题标题】：container div not stretching to full height of parent [duplicate]容器 div 没有拉伸到父级的全高 [重复]
【发布时间】：2019-04-07 07:18:53
【问题描述】：

我试图让容器 div 伸展到父级的完整高度。如您所见，父（主体）具有信息颜色，容器具有原色。容器的颜色应该超过父容器的颜色，但不是。我只是使用颜色来帮助识别我的 html 的哪个部分没有拉伸到页面的整个高度。以下是出处

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>

  <body class="body bg-info">
    <div class="container-fluid bg-primary">
      <div class="row">
        <div class="col-md-4">
          <div class="info-stats">
            Image Id:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Status:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Endpoint:
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="info-logs">
            Logs:
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

和css文件

.body {
  background: #eeeeee;
}

.info-stats {
  background: #ffffff;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  height: 25%;
  width: 100%;
  margin-top: .5%;
}

.info-logs {
  background: #ffffff;
  height: 50%;
  width: 100%;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  margin-top: 1%;
}

.container-fluid {
  height: 100%;
}

感谢您的帮助！

【问题讨论】：

您需要在容器上指定高度才能知道它们的 100% 是什么：html, body {height:100%}
如果你在一个元素上指定 height:100% 它基本上得到父容器的完整高度，但如果父容器也有 height:100% 父容器得到父容器的完整高度父容器，最终以这种方式，如果没有单个容器元素具有固定/确定的高度并且您希望高度为 100%（不使用 vh 的主体/页面），则您必须将 height:100% 赋予主体元素/跨度>

标签： html css bootstrap-4

【解决方案1】：

原因是您的html 和body 标签没有被拉伸到全高。你应该这样设计它们：

html, body {
  height: 100vh;
}

这是working codepen

您不能使用min-height，因为它不适用于.container-fluid {height:100%}。

注意：不要使用背景颜色来查找 html 元素！而是使用检查元素并将鼠标悬停在 html 元素上。

【讨论】：

【解决方案2】：

高度为 100% 的元素只会扩展到其父元素的高度。为 html 和 body 标签添加 100% 的高度：

html,body{
   height: 100%;
}

当你在它的时候，摆脱.info-stats和.info-logs的高度：

html,body{
   height: 100%;
}

.body {
  background: #eeeeee;
}

.info-stats {
  background: #ffffff;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  width: 100%;
  margin-top: .5%;
}

.info-logs {
  background: #ffffff;
  width: 100%;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  margin-top: 1%;
}

.container-fluid {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
  <body class="body bg-info">
    <div class="container-fluid bg-primary">
      <div class="row">
        <div class="col-md-4">
          <div class="info-stats">
            Image Id:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Status:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Endpoint:
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="info-logs">
            Logs:
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

【讨论】：

【解决方案3】：

试试这个...为 .info-stats 和 .info-logs 设置 height: 100%;

.body {
  background: #eeeeee;
}

.info-stats {
  background: #ffffff;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  height: 100%;
  width: 100%;
  margin-top: .5%;
}

.info-logs {
  background: #ffffff;
  height: 100%;
  width: 100%;
  box-shadow: 0 0px 3px rgba(0, 0, 0, .19), 0 0px 3px rgba(0, 0, 0, .23);
  margin-top: 1%;
}

.container-fluid {
  height: 100%;
}

<html>

  <head>
    <meta charset="utf-8">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>

  <body class="body bg-info">
    <div class="container-fluid bg-primary">
      <div class="row">
        <div class="col-md-4">
          <div class="info-stats">
            Image Id:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Status:
          </div>
        </div>
        <div class="col-md-4">
          <div class="info-stats">
            Endpoint:
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="info-logs">
            Logs:
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

【讨论】：