动态计算元素高度：构建自适应滚动容器的教程

<div class="Scrollable_Wrapper">
    <div class="list-item">Item 1</div>
    <div class="list-item">Item 2</div>
    <div class="list-item">Item 3</div>
    <div class="list-item">Item 4</div>
</div>

.Scrollable_Wrapper {
    overflow-x: hidden;
    overflow-y: scroll;
    /* height 将通过 JavaScript 动态设置 */
}

.list-item {
    padding: 10px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

document.addEventListener('DOMContentLoaded', function() {
    // 获取第一个列表项的引用
    const firstListItem = document.querySelector('.list-item');

    if (firstListItem) {
        // 获取单个列表项的 clientHeight
        // clientHeight 包含 padding，但不包含 border 和 margin
        const itemHeight = firstListItem.clientHeight;

        // 假设我们希望显示 2 个列表项的高度
        const desiredVisibleItems = 2;
        const wrapperHeight = itemHeight * desiredVisibleItems;

        // 获取滚动容器的引用
        const scrollableWrapper = document.querySelector('.Scrollable_Wrapper');

        if (scrollableWrapper) {
            // 设置滚动容器的高度
            scrollableWrapper.style.height = `${wrapperHeight}px`;
            console.log(`Scrollable_Wrapper height set to: ${wrapperHeight}px`);
        }
    } else {
        console.warn('No .list-item found to calculate height.');
    }
});

$(window).on('load', function() {
    // 获取第一个列表项的高度
    // .height() 默认获取内容高度
    // .innerHeight() 包含 padding
    // .outerHeight() 包含 padding 和 border
    // 这里我们假设 .list-item 的高度主要由其内容和 padding 决定
    const itemHeight = $('.list-item:first').innerHeight(); 

    if (itemHeight) {
        // 假设我们希望显示 2 个列表项的高度
        const desiredVisibleItems = 2;
        const wrapperHeight = itemHeight * desiredVisibleItems;

        // 设置滚动容器的高度
        $('.Scrollable_Wrapper').css('height', `${wrapperHeight}px`);
        console.log(`Scrollable_Wrapper height set to: ${wrapperHeight}px`);
    } else {
        console.warn('No .list-item found to calculate height or itemHeight is 0.');
    }
});

.Scrollable_Wrapper {
    overflow-x: hidden; /* 隐藏水平滚动条 */
    overflow-y: scroll; /* 显示垂直滚动条 */
    /* height 将通过 JS/jQuery 动态设置 */
    border: 1px solid #ddd; /* 可选：为滚动区域添加边框 */
    box-sizing: border-box; /* 确保 padding 和 border 不会增加元素总宽度/高度 */
}

function setScrollableWrapperHeight(wrapperSelector, itemSelector, visibleItemsCount) {
    document.addEventListener('DOMContentLoaded', function() {
        const firstItem = document.querySelector(itemSelector);
        const wrapper = document.querySelector(wrapperSelector);

        if (firstItem && wrapper) {
            // 使用 offsetHeight 包含 padding 和 border，更接近元素的实际占用高度
            const itemFullHeight = firstItem.offsetHeight + 
                                   parseFloat(getComputedStyle(firstItem).marginBottom) +
                                   parseFloat(getComputedStyle(firstItem).marginTop); // 考虑 margin

            // 如果子元素之间有 margin-bottom，需要额外计算
            // 假设我们只计算 itemFullHeight 为 item.offsetHeight (包含border和padding)
            // 如果 item 之间有 margin，我们需要确保计算方式正确
            // 一个更健壮的方法是获取一个元素的实际渲染高度，包括其下外边距
            // 简单的例子，如果所有 item 的 margin-bottom 都一样，可以这样计算
            const computedStyle = getComputedStyle(firstItem);
            const itemTotalHeight = firstItem.offsetHeight + parseFloat(computedStyle.marginBottom);

            const calculatedHeight = itemTotalHeight * visibleItemsCount;
            wrapper.style.height = `${calculatedHeight}px`;
            console.log(`Dynamic height for ${wrapperSelector} set to: ${calculatedHeight}px`);
        } else {
            console.warn(`Could not find elements for selectors: ${wrapperSelector} or ${itemSelector}`);
        }
    });
}

// 调用函数来设置你的滚动容器
setScrollableWrapperHeight('.Scrollable_Wrapper', '.list-item', 2);