如何让我的滑块高度自动匹配屏幕底部？

所以我想我的滑块的高度自动结束在屏幕的底部，之后会有其他内容。这个网站是这样的： http://skywarriorthemes.com/arcane/landing/ 视频的高度自动适合屏幕底部，任何分辨率，我也想用我的滑块。如何让我的滑块高度自动匹配屏幕底部？

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>

此代码本身不会工作，因为有其他的js文件，但我不想因为对于网站的付费插件分享它，但你可以在的开始看代码你可以设置高度和宽度。

来源

2017-06-30 Detoxical

为此，您可以简单地使用CSS。这里有一个例子：

样本HTML：

<div class="nav"> 

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

</div>

样品CSS：

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

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

是什么使这项工作是利用VH（视高度）。在这个例子中，导航占据了视口高度的10％，视频滑块占据了视口高度的90％。

这里的例子 https://jsfiddle.net/kz9txg47/

来源

2017-06-30 20:40:24 Eric

工作的链接！非常感谢：D – Detoxical

您可以使用高度：100％它会适合整个容器滑块

来源

2017-06-30 20:27:59

如何让我的滑块高度自动匹配屏幕底部？

回答

相关问题