Bootstrap 4最大高度div

问题描述 投票：3回答：4

我有一个2列布局，其中第一列是垂直导航，右列是内容。

我希望第一列至少是视口大小的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>
css bootstrap-4
4个回答
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>

但是：Kua zxsw指出

在https://www.codeply.com/go/K7T1fXEl5p或黄色div上你不需要额外的CSS高度。当内容较少（视口高度较短）时，这也会起作用：html,body

1
投票

使用flexbox。

https://www.codeply.com/go/xdkXsLWRJt
.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;
}
0
投票

使用javascript可以修复相同高度的问题。

<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>
// 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;
}
-1
投票

<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>
html,body {
  height: 100vh;
}

#yellow {
  min-height: 100%;
  background: yellow;
}

只需要让你的身体达到100vh，并且在为你的黄色身份提供最小高度100％之后我也删除了h-100课程，而且它不需要任何其他内容。

如果你不想做太多，你总是可以使用min-vh-100类来做你同样的事情。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.