Full screen li slider 100% height doesnt work

Question

I've found great li slider http://unslider.com/ but I have a lot of issues with my project.

I try to set this slider as a background of fullscreen page, but my li elements are not 100% height of the window (container are).

<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>

I've mixed methods but still nothing. jQuery will solve the problem but I want to use pure CSS if it is possible

    .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%;
}

Try using line-height instead of height; – Phorden Oct 25 '13 at 14:55 — Phorden, Oct 25 '13 at 14:55

score 0 · Answer 1 · edited Sep 04 '17 at 12:06

Percentage based height doesn't actually work.

Here is a explanation why %'s height doesn't work - CSS – why doesn’t percentage height work?

You should try specific pixels of height or use line-height to maintain the validation.

.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%;
}

Full screen li slider 100% height doesnt work

1 Answers1