Question

我找到了很棒的li滑块http://unslider.com/，但我的项目存在很多问题。

我尝试将此滑块设置为全屏页面的背景，但我的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%;
}

Answer 1

基于百分比的高度实际上不起作用。

以下解释为什么％的身高不起作用 - 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%;
}

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

1 个答案: