如何将DIV定位在视口底部并用图像填充剩余的垂直高度？

问题描述 投票：0回答：1

我正在开发一个 Slider Slicker 轮播，其中图像轮播显示在视口底部，从轮播中选择的活动图像显示在其上方。我正在使用来自 https://kenwheeler.github.io/slick/

的 Slick Slider 同步

我希望整个项目适合视口，这样我就不必向上或向下滚动来查看任何内容。这将在不同尺寸的屏幕上查看，因此我希望它能够动态缩放。如果我在 javascript 中更改“slidesToShow: #,”，轮播中图像的高度就会发生变化，因此活动图像应放大或缩小以填充视口中的剩余可用空间。

SlidesToShow = 3

SlidesToShow = 7

<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/[email protected]/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.js"></script>
    <script type="text/javascript" src="scriptSync.js"></script>
</body>
</html>

$('.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
});

我尝试过使用 Flex Box 和 Stackoverflow 上另一个用户发布的代码。 https://codepen.io/calsal/pen/bGdgyBX

当我尝试插入图像代替文本 div 时，图像会缩放到视口之外。

html css flexbox viewport slick.js
1个回答
0
投票

考虑让 

<body>
元素成为垂直弹性布局，其高度填充屏幕（减去垂直边距）：

body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 20px);
}

然后让活动图像平滑滑块填充导航滑块后留下的剩余垂直空间，或者如果需要太多垂直空间则缩小：

.slider-for {
  flex-grow: 1;
  min-height: 0;
}

让活动图像滑块的内部光滑元素也遵守此高度：

.slider-for :is(.slick-list, .slick-track, .slick-slide) {
  height: 100%;
}


$('.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
});
html,
body {
  background-color: #7b6e6d;
  margin: 5px;
}

body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 20px);
}

.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;
}

.slider-for {
  flex-grow: 1;
  min-height: 0;
}

.slider-for :is(.slick-list, .slick-track, .slick-slide) {
  height: 100%;
}
<html>
  <head>
    <title>4161-15_WI</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"
      integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"
      integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <div class="slider-for">
      <object type="image/jpg" data="https://picsum.photos/1000/200"></object>
      <object type="image/jpg" data="https://picsum.photos/1000/200?"></object>
      <object type="image/jpg" data="https://picsum.photos/1000/200?0"></object>
      <object type="image/jpg" data="https://picsum.photos/1000/200?1"></object>
      <object type="image/jpg" data="https://picsum.photos/1000/200?2"></object>
      <object type="image/jpg" data="https://picsum.photos/1000/200?3"></object>
      <object type="image/jpg" data="https://picsum.photos/1000/200?4"></object>
      <object type="image/jpg" data="https://picsum.photos/1000/200?5"></object>
      <object type="image/jpg" data="https://picsum.photos/1000/200?6"></object>
      <object type="image/jpg" data="https://picsum.photos/1000/200?7"></object>
    </div>
    <div class="slider-nav">
      <div class="carousel"><img src="https://picsum.photos/1000/200" /></div>
      <div class="carousel"><img src="https://picsum.photos/1000/200?" /></div>
      <div class="carousel"><img src="https://picsum.photos/1000/200?0" /></div>
      <div class="carousel"><img src="https://picsum.photos/1000/200?1" /></div>
      <div class="carousel"><img src="https://picsum.photos/1000/200?2" /></div>
      <div class="carousel"><img src="https://picsum.photos/1000/200?3" /></div>
      <div class="carousel"><img src="https://picsum.photos/1000/200?4" /></div>
      <div class="carousel"><img src="https://picsum.photos/1000/200?5" /></div>
      <div class="carousel"><img src="https://picsum.photos/1000/200?6" /></div>
      <div class="carousel"><img src="https://picsum.photos/1000/200?7" /></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.js"></script>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.