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

7cwmlq89 于 12个月前发布在其他

关注(0)|答案(1)|浏览(170)

我正在使用Slider Slicker carousel，其中图像的carousel沿着视口的底部显示，从carousel中选择的活动图像显示在其上方。
我想整个项目，以适应视口，使我不必向上或向下滚动查看任何内容。这将在不同大小的屏幕上查看，所以我想它动态缩放。如果我改变'slidesToShow：#，'在JavaScript中低于旋转木马中的图像的高度改变，因此活动图像应该放大或缩小以填充视口中剩余的可用空间。
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>

个字符
我试过使用flex box和另一个用户在Stackoverflow.https://codepen.io/calsal/pen/bGdgyBX上发布的代码
当我试图插入图像来代替文本div时，图像会在视口外缩放。

css

来源：https://stackoverflow.com/questions/77737968/how-to-position-div-at-bottom-of-viewport-and-fill-remaining-vertical-height-wit

1条答案

按热度按时间

zpqajqem1#

考虑让<body>元素是一个垂直的flex布局，其高度填满屏幕（减去垂直边距）：

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

x

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>

的一个字符串

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答