全屏li滑塊100％高度不起作用

我找到了很棒的滑塊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

基於百分比高度不實際工作。

這裏是一個解釋爲什麼％的高度不起作用 - CSS – why doesn’t percentage height work?

你應該嘗試特定的像素高度的或使用的line-height保持驗證。

.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％高度不起作用

回答

相關問題