Question

我正在尝试使容器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%;
}

感谢帮助！

Answer 1

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

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>

Answer 2

原因是您的html和body标签没有伸展到全高。您应该这样设置样式：

html, body {
  height: 100vh;
}

这里是working codepen

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

注意：请勿使用背景色来查找html元素！而是使用inspect元素并将鼠标悬停在html元素上。

Answer 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>

容器div未拉伸到父级的全部高度

3 个答案: