如何将Slick缩略图DIV固定视口底部，主图填充剩余垂直高度？

我正在开发一款基于Slick Slider的同步轮播组件，缩略图轮播放置在视口底部，选中的主图显示在上方。核心需求如下：

• 整个项目完全适配视口，无需滚动即可查看全部内容
• 支持不同屏幕尺寸的动态缩放
• 修改JavaScript中的slidesToShow参数时，缩略图轮播的图片高度会变化，主图需自动缩放填充视口剩余可用空间

不同参数下的效果示例：

• slidesToShow = 3 时的效果：
• slidesToShow = 7 时的效果：

现有代码 #

HTML代码 #

<html>
<head>
    <title>4161-15_WI</title>
    <link rel="stylesheet" type="text/css" href="css/slick.css" />
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
    <link rel="stylesheet" type="text/css" href="css/xtest.css" />

    <style>
        html, body {
            background-color: #7b6e6d;
            margin: 5px;
            height: 100%;
        }

        .top {
            height: auto;
            background: #c0c0c0;
        }

        .bottom {
            height: auto;
        }

        .carousel {
            height: auto;
        }

        .slick-slide {
            margin: auto;
        }

            .slick-slide img {
                width: 100%;
                border: 3px solid #7b6e6d;
            }

        .wrapper .slick-dots li button:before {
            font-size: 20px;
            color: black;
        }
    </style>
</head>
<body>
    <div class="slider-for">
        <object type="image/svg+xml" data="images/1.svg"></object>
        <object type="image/svg+xml" data="images/2.svg"></object>
        <object type="image/svg+xml" data="images/3.svg"></object>
        <object type="image/svg+xml" data="images/4.svg"></object>
        <object type="image/svg+xml" data="images/5.svg"></object>
        <object type="image/svg+xml" data="images/6.svg"></object>
        <object type="image/svg+xml" data="images/7.svg"></object>
        <object type="image/svg+xml" data="images/8.svg"></object>
        <object type="image/svg+xml" data="images/9.svg"></object>
        <object type="image/svg+xml" data="images/10.svg"></object>
    </div>
    <div class="slider-nav">
        <div class="carousel"><img src="images/1.svg"></div>
        <div class="carousel"><img src="images/2.svg"></div>
        <div class="carousel"><img src="images/3.svg"></div>
        <div class="carousel"><img src="images/4.svg"></div>
        <div class="carousel"><img src="images/5.svg"></div>
        <div class="carousel"><img src="images/6.svg"></div>
        <div class="carousel"><img src="images/7.svg"></div>
        <div class="carousel"><img src="images/8.svg"></div>
        <div class="carousel"><img src="images/9.svg"></div>
        <div class="carousel"><img src="images/10.svg"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.7.1/slick/slick.js"></script>
    <script type="text/javascript" src="scriptSync.js"></script>
</body>
</html>

JavaScript代码 #

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    dots: false,
    speed: 500,
    swipeToSlide: true,
    asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    adaptiveHeight: false,
    asNavFor: '.slider-for',
    dots: false,
    fade: false,
    infinite: false,
    swipe: true,
    arrows: false,
    centerMode: true,
    focusOnSelect: true
});

已尝试的方法 #

曾使用Flexbox布局，也参考过其他用户的代码方案，但将文本DIV替换为图片后，图片会缩放至视口外，无法满足需求。

解决方法 #

核心思路是通过Flexbox实现垂直布局，让主图区域自动填充剩余视口高度，同时结合动态计算和事件监听，适配缩略图高度变化。

1. 调整CSS布局 #

html, body {
    background-color: #7b6e6d;
    margin: 5px;
    height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.slider-for {
    flex: 1;
    overflow: hidden;
    margin-bottom: 10px;
}

.slider-nav {
    flex-shrink: 0;
}

.slider-for object {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slick-slide {
    margin: 0 5px;
}

.slick-slide img {
    width: 100%;
    border: 3px solid #7b6e6d;
    box-sizing: border-box;
}

2. 优化JavaScript逻辑 #

function adjustMainSliderHeight() {
    const viewportHeight = $(window).height();
    const navHeight = $('.slider-nav').outerHeight();
    const bodyMargin = parseInt($('body').css('margin')) * 2;
    const mainHeight = viewportHeight - navHeight - bodyMargin - 10;
    $('.slider-for').height(mainHeight);
}

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    dots: false,
    speed: 500,
    swipeToSlide: true,
    asNavFor: '.slider-nav',
    init: function() {
        adjustMainSliderHeight();
    }
});

$('.slider-nav').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    adaptiveHeight: false,
    asNavFor: '.slider-for',
    dots: false,
    fade: false,
    infinite: false,
    swipe: true,
    arrows: false,
    centerMode: true,
    focusOnSelect: true,
    init: function() {
        adjustMainSliderHeight();
    }
});

$(window).on('resize', function() {
    adjustMainSliderHeight();
});

关键说明 #

• flex:1 让主图容器自动填充视口剩余空间，flex-shrink:0 保证缩略图区域高度不被压缩
• object-fit:contain 确保SVG主图保持原有比例，避免拉伸或溢出
• 监听窗口resize和Slick初始化事件，动态计算主图容器高度，适配不同slidesToShow参数下的缩略图高度变化
• box-sizing:border-box 让缩略图边框计入宽度，防止容器溢出

内容的提问来源于stack exchange，提问作者fishy