强制 Bootstrap 4 列高为内容高度答案

【问题标题】：Force Bootstrap 4 column height to be content height强制 Bootstrap 4 列高为内容高度
【发布时间】：2020-10-18 15:54:45
【问题描述】：

在较大的屏幕上，布局是我想要的样子。但是，在较小的屏幕上，我希望“Sidemenu”列占据其内容高度，而“Main content”部分占据页面的其余高度。如何使用引导程序实现这一点？第一个图像显示大屏幕的布局，第二个图像显示小屏幕的布局。这是JsBin链接https://jsbin.com/zimuwoyowe/7/edit?html,css,output。

下面显示使用的html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <div class="container d-flex h-100">
    <div class="row flex-grow-1">
      <div class="col-sm-4">
        <div class="row bg-white">
          <div class="col">
            Sidemenu
          </div>
        </div>
      </div>
      <div class="col-sm-8 bg-white">
        Main content
      </div>
    </div>
  </div>
</body>
</html>

下面是使用的 CSS 规则。

html, body {
  background: grey;
}

html, body {
  height: 100%;
}

【问题讨论】：

标签： bootstrap-4 flexbox

【解决方案1】：

您只需要从container div 中删除h-100 的类，然后将height:100vh 的css 属性赋予您的主要内容div 而不是body，这样输出是你的需要！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
      body {
        background-color: gray;
      }
    </style>
  <title>Document</title>
</head>

<body>
  <div class="container d-flex">
    <div class="row flex-grow-1">
      <div class="col-sm-4">
        <div class="row bg-white">
          <div class="col">
            Sidemenu
          </div>
        </div>
      </div>
      <div class="col-sm-8 bg-white" style="height: 100vh;">
        Main content
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：

这样的问题是，随着侧边菜单内容高度（例如，添加 300px 的高度）的增加，这会将主要内容向下推，从而添加滚动条（即使主要内容部分没有有任何内容）。要了解我的意思，请查看jsbin.com/xugiwufuca/1/edit?html,output
@lordvcs 你可以查看这个例子：stackoverflow.com/questions/90178/…
感谢您的帮助，但我已经阅读了它并没有解决我的问题