Bootstrap 4最大高度div

时间：2019-03-06 12:58:25

标签： css bootstrap-4

我有两列布局，第一列是垂直导航，右列是内容。

我希望第一列至少为视口大小的100％，但如果主要内容大于视口，则需要增加它。

如何使第一列（黄色）与第二列的高度相同？

html,body {
  height: 100%;
}

#yellow {
  height: 100%;
  background: yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-3 h-100" id="yellow">
      XXXX
    </div>
    <div class="col-9 h-100">
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      
    </div>
  </div>
</div>

4 个答案:

答案 0 :(得分：2)

由于Bootstrap 4使用flexbox，因此列的高度相等，但是当内容比视口高时，您使用的h-100会限制高度。

只需在黄色div上使用min-vh-100类。 

<div class="container-fluid">
  <div class="row">
    <div class="col-3 min-vh-100" id="yellow">
      XXXX
    </div>
    <div class="col-9">
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
    </div>
  </div>
</div>

演示：https://www.codeply.com/go/K7T1fXEl5p

您{strong>不需要{}或黄色div上的高度额外的CSS 。当内容较少（视口高度较短）时，这也将起作用：https://www.codeply.com/go/xdkXsLWRJt

答案 1 :(得分：1)

为此使用flexbox。

.row {
  display: flex; /* equal height of the children */
  min-height: 100vh;
}

.col {
  flex: 1; /* additionally, equal width */
  padding: 1em;
  border: solid;
}
.bg-yellow {
  background: yellow;
}
<div class="row">
  <div class="col bg-yellow">
    XXXX
  </div>
  <div class="col">
    Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
  </div>
</div>

答案 2 :(得分：0)

您可以使用javascript来解决相同的身高问题。

// Get divs
var divs = $('.same-height');
var maxHeight = 0;


// Loop all divs and check height, if bigger than max then save it
for (var i = 0; i < divs.length; i++) {
  if (maxHeight < $(divs[i]).outerHeight()) {
    maxHeight = $(divs[i]).outerHeight();
  }
}

// Set ALL card bodies to this height
for (var i = 0; i < divs.length; i++) {
  $(divs[i]).height(maxHeight);
}
#yellow {
  background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-3 same-height" id="yellow">
      XXXX
    </div>
    <div class="col-9 same-height">
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      
    </div>
  </div>
</div>

答案 3 :(得分：-1)

html,body {
  height: 100vh;
}

#yellow {
  min-height: 100%;
  background: yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-3" id="yellow">
      XXXX
    </div>
    <div class="col-9">
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      Content goes here<br>
      
    </div>
  </div>
</div>

只需将您的身体设为100vh，在为您的黄色id设置最小高度100％之后，我也删除了h-100类，并且不需要其他任何东西。

如果您不想做太多事情，可以始终为您的div使用min-vh-100类，它执行相同的操作。

相关问题
最新问题