Bootstrap 4最小页面/边栏高度

Question

我的代码如下：

.container {
  display: flex;
  flex-direction: column;
  border: 3px solid red;
}
.button {
  font-size: 12px;
  line-height: 3rem;
  width: 100%;
}

我正在尝试设置最小高度，因为当内容太短时，侧边栏如下所示：

注意图像的空白底部

将<div class="container-fluid"> <div class="row"> <nav>...</nav> <!-- sidebar --> <main role="main"> <!-- content --> </main> </div> </div> 的高度设置为100％可以在此页面上解决此问题，但是会中断内容长于100％的页面（侧边栏又太短，但这一次（仅）是屏幕高度的100％） ：

那是我滚动后的侧边栏，不会超过100％。

当内容比屏幕短时，我希望边栏的高度为100％，而当内容比屏幕长时，边栏的高度应与内容一样高。 如何为侧边栏（或.container-fluid）设置最小高度？ html, body, .container-fluid, .row也不起作用。最小高度似乎在CSS3中非常奇怪。

JSFiddle：http://jsfiddle.net/uc9gm2ke/3/

Answer 1

您无需添加任何额外的CSS，此HTML即可完美运行。

HTML

git diff $old $new -- $file1 $file2

Answer 2

我通过从以下代码集中复制代码来解决此问题：https://www.codeply.com/go/kTmpqn61nq

CSS：

body, html, .container-fluid {
    height: 100%;
}

.wrapper {
    min-height: 100vh;
    max-height: 100%;
}

main {
    max-height: 100%;
    overflow-y: auto;
}

HTML：

• 将wrapper类添加到主要.row div中。

这是我的代码：http://jsfiddle.net/uc9gm2ke/16/