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

我想要一个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>

---

这取决于您的意思是：您的内容（来宾条目）加载到.container div还是.section div

装入。容器： 我似乎在class

container

上设置了

min height

或

height

如果您正在引用其他库（如引导库），则可能需要使用

覆盖
容器的
高度
属性！重要信息

如果此容器上没有设置高度，容器将自动调整大小，使其内容达到适当的高度

.container {
    height: auto;
}

加载到。节：

如果您正在将内容加载到
.section
，我会：

A.将分页控件移出
部分
，同时仍从上方应用高度规则

B.将来宾条目加载到
.container
div中，同时仍遵循上述高度

.container {
    height: auto;
}