当内容有不同的高度时，如何自动调整div的高度

Question

我想要div的高度，其中包含不同的高度，当内容的高度很小时自动调整大小（因此减小div的高度）。问题是：所有内容都在DIV中，但大部分内容都在屏幕视图之外。 （这些条目构成了留言簿）。 情况如下：

如果屏幕上的所有可见内容都有较小的高度：div应自动增加，如下所示：

注意：屏幕上总会显示3个条目。所有其他都是“屏幕外”并等待滑入

<section class="section bg-image">
    <div class="container">
        <h1 class="nex-title">Wat klanten zeggen over ons...</h1>
        <h4 class="nex-undertitle">Ervaringen van klanten</h4>
    </div>
    <div class="nex-testimonials-slider">
        <?php include('guestbook/guestbook-slider.php'); ?>
    </div>
</section>

的CSS：

.bg-image {
background: #009de1;
background-size: cover;
position: relative;
z-index: 1;
width: 100%;
min-height: 500px;
overflow: auto;
}

Answer 1

这取决于你的意思：你的内容（访客条目）被加载到.container div或.section div

加载到.container： 我似乎在课程min-height上设置了height或container。

如果您正在引用其他库（如Bootstrap），则可能需要使用height覆盖container的{​​{1}}属性。

在此容器上没有设置高度，容器将自动调整到适合其内容的高度。

!important

加载到.section：

如果您要将内容加载到.container { height: auto; } ，我会：

一个。将分页控件移出.section，同时仍然应用上面的高度规则。

B中。将访客条目加载到.section div中，同时仍然遵循上述高度。