twitter bootstrap fill height with Stashy sidebar flyout

Question

I'm tryng t use the Stashy Flyout component to have a flyout side bar. So far everything works fine except one small problem in the css. The height on the DIV content in the body is not resizing to 100% of the height. I have debugged in chrome, and up to the body tag, i get full height, after the "st-flyout" class tag, the height follows the content, and not the body.

here is some code in the fiddle !

in the fiddle is a simulation of my problem, I expect the whole result page to be colored with any of the corresponding id color, s1,s2..s5.. but all of these div have the same height of the s5 or the content.

    <div class="st-sticky-wrap">
    <div id="s1" class="st-flyout">
        <div id="s2" class="st-flyout-container">
            <div id="s3" class="st-flyout-main">
                <div id="s4" class="row">
                    <div id="s5">
                        <div class="container fill">
                            <div class="page-header">
                                 <h1>Hello World<small>small world</small></h1>

                            </div>
                            <div class="row">
                                <div class="col-lg-6"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



.fill {
    min-height: 100%;
    height: 100%;
}
#s1 {
    background:green;
}
#s2 {
    background:blue;
}
#s3 {
    background:red;
}
#s4 {
    background:black;
}
#s5 {
    background:yellow;
}

please help... I need s1 to be the same height of the body.

Answer 1

I have checked your jsfiddle post here are the thing you need to change remove height for .st-sticky-wrap "height: auto !important;"- delete this and add following styles its works seeing green color background all over the page

html,body
    {
        height: 100%;
        width: 100%;
        padding:0px;
        margin: 0px;
    }
    .fill {
        min-height: 100%;
        height: 100%;
    }
    .st-sticky-wrap
    {
        height: 100%;
    }
    #s1 {
        background:green;
        height: 100%;

    }
    #s2 {
        background:blue;
    }
    #s3 {
        background:red;
    }
    #s4 {
        background:black;
    }
    #s5 {
        background:yellow;
    }

URL jsfiddle : http://jsfiddle.net/qa9243d8/

Cheers