css - 高度设置为 100vh 的 html 元素并不总是跨越整个页面高度

Question

我的正文内容容器出现了这个奇怪的问题。我希望它和视口(viewport)一样高，所以我在 css 中将它的高度设置为 100vh。它适用于所有页面，但我尝试在此正文内容容器内制作 Bootstrap 网格的页面除外。

在这里你可以看到它的样子:

蓝色的 div 是我的正文内容。

当我一直缩小时，蓝色 div 的高度确实是 100vh。

在里面我有这个

<div class="container body-content">
    <div class="row text-center">
        @foreach (var item in Model.Products)
        {
            @Html.Partial("ProductColumn", item)
        }
    </div>
</div>

Html.Partial 在每次迭代中呈现如下内容:

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 product-column-wrapper">
    <div class="product-column">
        //product title

        <div id="thumbnail-container">
            <a class="d-block mb-4 h-100" asp-route="@WebConstants.Routes.ProductDetails" asp-route-id="@Model.Id" asp-route-title="@Model.Name">
                <img id="thumbnail" src="@Model.ThumbnailSource" class="img-responsive img-thumbnail" alt="@Model.Name">
            </a>
        </div>

        //price

      //Edit, Delete buttons
    </div>
</div>

这是我的一些 CSS 类:

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

footer {

    color: white;
    font-size: 13px;
    text-align: center;
    vertical-align: middle;
    max-height: 15px;
}

.body-content {
    background: aliceblue;
    border-radius: 5px;
    padding: 10px;
    height: 100vh;
}

如果有人能帮我找出在这种情况下如何拉伸(stretch)正文内容，那就太好了。

Answer 1

尝试使用 min-height: 100vh 而不是 height: 100vh。例如

.body-content {
  background: aliceblue;
  border-radius: 5px;
  padding: 10px;
  min-height: 100vh;
}