How to make my slider height automatically match the bottom of the screen?

Question

So i want my slider's height to automatically end at the bottom of the screen, and after that there would be other content. This website has this: http://skywarriorthemes.com/arcane/landing/ the video's height will automatically fit to the bottom of the screen, in any resolution, and i want that too with my slider.

HTML:

<div id="sliderhome" class="container-fluid">
        <div id="layerslider" class="ls-wp-container ls-container ls-fullwidth" style="height:810px; margin: 0px auto; width:100%;">
            <div class="ls-slide" data-ls="slidedelay:8000;transition2d:75,79;">
                <img src="./images/slider1.png" class="ls-bg" alt="Slide background" />
                <h1 class="ls-l" style=" color: #f7f7f7; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 50px;white-space: nowrap; width: auto; height: auto;  margin-left: 0px; margin-top: 0px;top: 76px; left: 52px; display:block; " data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:600;offsetxout:-50;durationout:1000;"> Welcome to the<br><span style="color: #ff8800;">Hiraeth network!</span></h1>
                <h1 class="ls-l" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:500;offsetxout:-50;durationout:1000;" style="position: absolute; top: 224px; left: 52px; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 18px; color: rgb(218, 213, 206); white-space: nowrap; width: auto; height: auto; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: -209.1291058540763px; display: block; visibility: visible; background-position: initial initial; background-repeat: initial initial;"> For gamers by gamers </h1>
            </div>


            <div class="ls-slide" data-ls="slidedelay:9500;transition2d:5;timeshift:-3000;">
                <img src="./images/slider2.png" class="ls-bg" alt="Slide background">
                <p class="ls-l" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:200;offsetxout:-50;durationout:1000;" style="top: 52px; left: 31px; color: rgba(255, 90, 90, 0.901961); text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 30px; background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto;   margin-left: 0px; margin-top: 0px; display: block; "> BBPRESS FORUM AND RATING SYSTEM </p>
                <p class="ls-l" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:0;offsetxout:-50;durationout:1000;" style="top: 136px; left: 32px; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 18px; color: rgb(218, 213, 206); background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; margin-left: 0px; margin-top: 0px; display: block; "> MAKE KICK-ASS REVIEWS AND CREATE AN AWESOME COMMUNITY </p>
            </div>
            <div class="ls-slide" data-ls="slidedelay:9500;transition2d:5;timeshift:-3000;">
                <img src="./images/slider3.png" class="ls-bg" alt="Slide background" style="padding: 0px; border-width: 0px; width: 1170px; height: 301px; margin-left: -585px; margin-top: -150.5px; visibility: visible; opacity: 1;">
                <img class="ls-s-1" src="http://skywarriorthemes.com/oblivion/wp-content/uploads/2013/08/b_transparent.png" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:500;offsetxout:-50;durationout:1000;" style="position: absolute; top: 0px; left: 0px; opacity: 0.4; width: 1509px; height: 521px; padding: 0px; border-width: 0px; -webkit-transform: rotate(0deg) scale(1, 1); visibility: hidden; margin-left: 0px; margin-top: 0px;">
                <h1 class="ls-s-1" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:200;offsetxout:-50;durationout:1000;" style="position: absolute; top: 80px; left: 50px; color: rgba(255, 90, 90, 0.901961); text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 28px; background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: 0px; display: block; visibility: hidden; background-position: initial initial; background-repeat: initial initial;"> super easy to use page builder </h1>
                <h1 class="ls-s-1" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:0;offsetxout:-50;durationout:1000;" style="position: absolute; top: 155px; left: 50px; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 18px; color: rgb(218, 213, 206); background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: 0px; display: block; visibility: hidden; background-position: initial initial; background-repeat: initial initial;"> create pages as simple as drag and drop </h1>
                <img class="ls-s-1" data-ls="offsetxin:0;offsetyin:300px;durationin:2000;delayin:1200;offsetxout:-50;durationout:1000;" src="./images/305x305.jpg" style="position: absolute; top: 40px; left: 595px; width: 342px; height: 268px; padding: 0px; border-width: 0px; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: 0px; display: block; visibility: hidden;">
                <img class="ls-s-1" data-ls="offsetxin:0;offsetyin:0px;durationin:2000;delayin:4000;offsetxout:-50;durationout:1000;" src="./images/305x305.jpg" style="position: absolute; top: 40px; left: 596px; width: 342px; height: 268px; padding: 0px; border-width: 0px; -webkit-transform: rotate(0deg) scale(1, 1); opacity: 1; visibility: hidden; margin-left: 0px; margin-top: 0px;">
            </div>

        </div>
    </div>

This code itself wont work because there is other js files, but i dont want to share it since its a paid plugin for websites, but as you can see in the beginning of the code you can set the height and width.

Answer 1

You can do this simply using CSS. Here's an example:

Sample HTML:

<div class="nav">

</div>
<div class="video-slider">

</div>

Sample CSS:

.nav{
    background-color: rgba(255,0,0,0.8);
    height:10vh;
}

.video-slider{
    background-color: rgba(0,255,0,0.8);
    height:90vh;
}

What makes this work is the use of vh (viewport height). In this example, the nav is taking up 10% of the viewport height and the video-slider is taking up 90% of the viewport height.

Here's a link to the example https://jsfiddle.net/kz9txg47/

Answer 2

You can use height: 100% it will fit to whole container for the slider