容器div没有延伸到父容器的全部高度

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

感谢您的帮助！

原因是您的html和body标记未拉伸为全高。你应该这样设计它们：

html, body {
height: 100vh;
}

这是一个正在工作的代码笔

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

注意：不要使用背景色来查找html元素！相反，使用inspect元素并将鼠标悬停在html元素上。

具有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>

试试这个。。。为.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>

相关内容

最新更新

热门标签：