Bootstrap，如何使容器流体的高度为 100%

Question

我有一个包含在 div 中的引导容器流体，现在我希望容器流体的高度为 100%，无论它的内容如何，但它似乎只占用它的高度下面的内容是我的代码

Html
<div class="wrap">
  <div class="container-fluid h-100 test">this is container-fluid
  <div>hello my brother</div>
  </div>

</div>

我的 css

html,
body {
  height: 100%;
}

.wrap {
  min-height: 100%;
  height: auto;
  margin: 0 auto -60px;
  padding: 0 0 60px;
  background: blue;

}


.test {
  height: 100%;
  background-color: yellow;
  border: 1px solid red;
  text-align:center;
}

.footer {
  height: 60px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  padding-top: 20px;
}

现在我希望黄色 div 占据 100% 的高度，但它没有按预期工作.. 这是我的小提琴

Answer 1

你给wrap a height:auto只是删除那个height:auto意味着它将保持它自己的高度给它的孩子，如果他们是更多的孩子，那么它会增加它自己的高度。只需删除它并添加height:100%

 html, body { height: 100%; }.wrap { height: 100%; margin: 0 auto -60px; padding: 0 0 60px; background: blue; }.test { height: 100%; background-color: yellow; border: 1px solid red; text-align:center; }.footer { height: 60px; background-color: #f5f5f5; border-top: 1px solid #ddd; padding-top: 20px; }

 <:DOCTYPE HTML> <html> <head> <title>Welcome </title> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> </head> <body> <div class="wrap"> <div class="container-fluid h-100 test">this is container-fluid <div>hello my brother</div> </div> </div> </body> <footer class="footer"> <div class="container"> <p class="pull-left">my site</p> <p class="pull-right">2019</p> </div> </footer> </html>

Bootstrap，如何使容器流体的高度为 100%

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-11-19 06:30:30

Bootstrap，如何使容器流体的高度为 100%

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-11-19 06:30:30

解决方案1
0 已采纳 2019-11-19 06:30:30