Полноэкранный слайдер li 100% высота не работает

Я нашел отличный слайдер li http://unslider.com/, но у меня много проблем с моим проектом.Полноэкранный слайдер li 100% высота не работает

Я пытаюсь установить этот слайдер в качестве фона полноэкранной страницы, но мои элементы li не являются 100% высотой окна (контейнера).

<body> 
    <!--- Always on top ---> 
    <section class="content"> 
     <nav> 
      <ul> 
       <li id="fotograf_pg1_btn">1btn</li> 
       <li id="fotograf_pg2_btn">2btn</li> 
       <li id="fotograf_pg3_btn">3btn</li> 
      </ul> 
     </nav> 
    </section> 

      <!----------------------> 

      <!-----as a background ----------> 
<div class="unslider"> 
    <ul> 
     <!-------------- Slide fotograf ślubny -------------> 
     <li id="fotograf_pg1"> Fotograf zakładka 1</li> 
     <!-------------- Slide Fotograf prouktowy -------------> 
     <li id="fotograf_pg2"> Fotograf zakładka 2</li> 
     <!-------------- Slide Fotograf prouktowy -------------> 
     <li id="fotograf_pg3"> Fotograf zakładka 3</li> 
    </ul> 
</div> 
</body>

У меня смешанные методы, но все равно ничего. JQuery будет решить эту проблему, но я хочу использовать чистый CSS, если это возможно

.unslider { position: relative; overflow: hidden; 
    height: auto !important;/
    min-height: 100%; /* ie6 ignores min-height completely */ 
    height: 100%; 
    width:100%; 
    background-color: red; /* just for presentational purposes */ 
    position: absolute; overflow:hidden; 
    top:0px; 
    z-index:-1; 

} 


.unslider li { 
    list-style:none; 
    display: inline-block; 
    height: 100%; 
    width:100%; 
    } 

.unslider ul li { 
    float: left; 
    display: inline-block 
    height: auto !important; /* ie6 ignores !important, so this will be overridden below */ 
    min-height: 100%; /* ie6 ignores min-height completely */ 
    height: 100%; 
    width:100%; 
} 

.unslider ul{ 
    display:block; 
    height: 100%; 
    width:100%; 
}

источник

2013-10-25 Przemysław Cioch

Попробуйте использовать высоту линии вместо высоты; – Phorden

основе Процент высота фактически не работает.

Вот объяснение, почему высота% 's не работает - CSS – why doesn’t percentage height work?

Вы должны попробовать конкретные пиксели высоты или использовать высоту строки для поддержания проверки.

.unslider ul li { 
    float: left; 
    display: inline-block 
    height: auto !important; /* ie6 ignores !important, so this will be overridden below */ 
    line-height: 100px; /* Use this with your desired pixel */ 
    height: 100%; 
    width:100%; 
}

источник

2013-10-25 15:13:40

Полноэкранный слайдер li 100% высота не работает

ответ

Смежные вопросы