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

Question

我的身体内容容器有这个奇怪的问题。我希望它和视口一样高，所以我在css中将它的高度设置为100vh。它适用于所有页面，除了我尝试在此主体内容容器中创建引导网格的页面。

在这里你可以看到它的外观：

blue-ish 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;
}

如果有人可以帮助我找到如何在这种情况下拉伸身体内容，那将是很好的。

Answer 1

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

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