Как сделать полноразмерный полноэкранный режим ползунка на верхней странице?

Question

У меня есть код слайдера по умолчанию на MaterializeCSS, я знаю, что могу просто добавить полноэкранный режим в слайдер-классе, но когда я сделаю это, мой другой контент будет скрыт внутри моего слайдера.

Возможно ли добавить полноэкранный режим на слайдере только на верхней части страницы и по-прежнему заставить ползунок взаимодействовать с другим контентом моей страницы в обычном режиме?

<div class="slider"> 
    <ul class="slides"> 
     <li> 
      <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image --> 
      <div class="caption center-align"> 
       <h3>This is our big Tagline!</h3> 
       <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
      </div> 
     </li> 
     <li> 
      <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image --> 
      <div class="caption left-align"> 
       <h3>Left Aligned Caption</h3> 
       <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
      </div> 
     </li> 
     <li> 
      <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image --> 
      <div class="caption right-align"> 
       <h3>Right Aligned Caption</h3> 
       <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
      </div> 
     </li> 
     <li> 
      <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image --> 
      <div class="caption center-align"> 
       <h3>This is our big Tagline!</h3> 
       <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5> 
      </div> 
     </li> 
    </ul> 
</div> 

Answer 1

.slide { 
    width: 100%; 
    height: auto; 
} 

Убедитесь, что слайдер не установлен абсолютный ..

Я думаю, что вы должны поделиться вам CSS, а также.