动态计算DIV元素高度：实现灵活布局与可控滚动容器

<div class="item">
    <p>这是一个示例文本内容，高度会根据内容而变化。</p>
    <p>更多内容...</p>
</div>
<div class="scrollable-wrapper">
    <!-- 这里将放入多个 .item 元素 -->
</div>

document.addEventListener('DOMContentLoaded', function() {
    // 获取第一个 .item 元素的引用
    const singleItem = document.querySelector('.item');

    if (singleItem) {
        // 使用 clientHeight 获取元素高度
        const itemHeight = singleItem.clientHeight;
        console.log('单个元素的高度 (clientHeight):', itemHeight, 'px');

        // 假设我们要创建一个只显示两个元素的滚动容器
        const wrapperHeight = itemHeight * 2;
        console.log('滚动容器应设置的高度:', wrapperHeight, 'px');

        // 找到滚动容器并设置其高度
        const scrollableWrapper = document.querySelector('.scrollable-wrapper');
        if (scrollableWrapper) {
            scrollableWrapper.style.height = `${wrapperHeight}px`;
            scrollableWrapper.style.overflowY = 'scroll'; // 启用垂直滚动
            scrollableWrapper.style.overflowX = 'hidden'; // 隐藏水平滚动
        }
    } else {
        console.warn('未找到 .item 元素。');
    }
});

$(window).on('load', function() {
    // 获取第一个 .item 元素的引用
    const $singleItem = $('.item').first();

    if ($singleItem.length) {
        // 使用 .height() 获取元素高度
        const itemHeight = $singleItem.height();
        console.log('单个元素的高度 (jQuery .height()):', itemHeight, 'px');

        // 假设我们要创建一个只显示两个元素的滚动容器
        const wrapperHeight = itemHeight * 2;
        console.log('滚动容器应设置的高度:', wrapperHeight, 'px');

        // 找到滚动容器并设置其高度
        const $scrollableWrapper = $('.scrollable-wrapper');
        if ($scrollableWrapper.length) {
            $scrollableWrapper.css({
                'height': `${wrapperHeight}px`,
                'overflow-y': 'scroll',
                'overflow-x': 'hidden'
            });
        }
    } else {
        console.warn('未找到 .item 元素。');
    }
});

<div class="scrollable-wrapper">
    <div class="scroll-item">
        <h3>商品A</h3>
        <p>这是商品A的详细描述，内容可能较长。</p>
        <img src="https://via.placeholder.com/100x50?text=Item1" alt="Item 1">
    </div>
    <div class="scroll-item">
        <h3>商品B</h3>
        <p>这是商品B的详细描述。</p>
        <img src="https://via.placeholder.com/100x50?text=Item2" alt="Item 2">
    </div>
    <div class="scroll-item">
        <h3>商品C</h3>
        <p>这是商品C的详细描述，内容也比较多。</p>
        <img src="https://via.placeholder.com/100x50?text=Item3" alt="Item 3">
    </div>
    <div class="scroll-item">
        <h3>商品D</h3>
        <p>这是商品D的详细描述。</p>
        <img src="https://via.placeholder.com/100x50?text=Item4" alt="Item 4">
    </div>
</div>

.scrollable-wrapper {
    width: 300px; /* 示例宽度 */
    border: 1px solid #ccc;
    margin: 20px;
    /* 高度将由JS动态设置 */
    /* overflow-y 和 overflow-x 也将由JS设置 */
}

.scroll-item {
    padding: 10px;
    margin-bottom: 5px; /* 元素之间的间距 */
    border-bottom: 1px dashed #eee;
    background-color: #f9f9f9;
}

.scroll-item:last-child {
    border-bottom: none;
}

.scroll-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 5px;
}

document.addEventListener('DOMContentLoaded', function() {
    const scrollItems = document.querySelectorAll('.scroll-item');
    const scrollableWrapper = document.querySelector('.scrollable-wrapper');

    if (scrollItems.length > 0 && scrollableWrapper) {
        // 获取第一个子元素的总高度 (包括margin-bottom)
        // 注意：clientHeight不包含margin，需要额外计算
        const firstItem = scrollItems[0];
        const itemHeight = firstItem.offsetHeight; // offsetHeight 包含 padding 和 border
        const itemStyle = getComputedStyle(firstItem);
        const itemMarginBottom = parseFloat(itemStyle.marginBottom);

        // 计算一个元素的实际占据高度（包含其自身的margin-bottom）
        const totalItemOccupiedHeight = itemHeight + itemMarginBottom;

        // 设置滚动容器的高度为两个元素的总占据高度
        // 如果有N个元素，则设置为 totalItemOccupiedHeight * N
        const wrapperHeight = totalItemOccupiedHeight * 2; 

        scrollableWrapper.style.height = `${wrapperHeight}px`;
        scrollableWrapper.style.overflowY = 'scroll';
        scrollableWrapper.style.overflowX = 'hidden';

        console.log('单个滚动项的offsetHeight:', itemHeight, 'px');
        console.log('单个滚动项的marginBottom:', itemMarginBottom, 'px');
        console.log('单个滚动项的总占据高度:', totalItemOccupiedHeight, 'px');
        console.log('滚动容器最终高度:', wrapperHeight, 'px');
    } else {
        console.warn('未找到滚动项或滚动容器。');
    }
});

$(window).on('load', function() {
    const $scrollItems = $('.scroll-item');
    const $scrollableWrapper = $('.scrollable-wrapper');

    if ($scrollItems.length > 0 && $scrollableWrapper.length) {
        const $firstItem = $scrollItems.first();
        // outerHeight(true) 获取元素的高度，包括内边距、边框和外边距
        const totalItemOccupiedHeight = $firstItem.outerHeight(true); 

        // 设置滚动容器的高度为两个元素的总占据高度
        const wrapperHeight = totalItemOccupiedHeight * 2;

        $scrollableWrapper.css({
            'height': `${wrapperHeight}px`,
            'overflow-y': 'scroll',
            'overflow-x': 'hidden'
        });

        console.log('单个滚动项的总占据高度 (outerHeight(true)):', totalItemOccupiedHeight, 'px');
        console.log('滚动容器最终高度:', wrapperHeight, 'px');
    } else {
        console.warn('未找到滚动项或滚动容器。');
    }
});