Reputation: 11

How to position DIV at bottom of viewport and fill remaining vertical height with image?

I am working on a Slider Slicker carousel where the carousel of images is displayed along the bottom of the viewport and the active image selected from the carousel is displayed above it. I am using the Slick Slider Syncing from https://kenwheeler.github.io/slick/

I would like the entire project to fit the viewport so that I do not have to scroll up or down to view any content. This will be viewed on different size screens so I would like it to scale dynamically. If I change 'slidesToShow: #,' in the javascript below the height of the images in the carousel changes and therefore the active image should scale up or down to fill the remaining available space in the viewport.

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

I have tried using flex box and the code posted by another user on Stackoverflow. https://codepen.io/calsal/pen/bGdgyBX

When I try to insert images in place of the text divs the images scale outside of the viewport.

Upvotes: 1

Answers (1)

Wongjn

Reputation: 24566

Consider having the <body> element be a vertical flex layout, with its height filling the screen (minus the vertical margins):

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

Then have the active image slick slider fill the remaining vertical space left after the navigation slider, or shrink if it would take too much vertical space:

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

Have the inner slick elements of the active image slider abide by this height too:

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

Upvotes: 1

How to position DIV at bottom of viewport and fill remaining vertical height with image?

Answers (1)

Related Questions