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％的高度，但它不能按预期工作。.这是我的fiddle

Answer 1

您给wrap一个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>

引导带，如何使容器流体的高度达到100％

1 个答案: