带有 Stashy 侧边栏弹出的 twitter 引导填充高度

Question

我正在尝试使用Stashy Flyout 组件来设置弹出侧栏。到目前为止，除了 CSS 中的一个小问题外，一切正常。正文中 DIV 内容的高度未调整为高度的 100%。我已经在 chrome 中进行了调试，直到 body 标签，我得到了全高，在“st-flyout”类标签之后，高度跟随内容，而不是 body。

这是fiddle中的一些代码！

在小提琴中是我的问题的模拟，我希望整个结果页面用任何相应的 id 颜色着色，s1,s2..s5.. 但所有这些 div 都具有相同的 s5 高度或内容。

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

请帮忙...我需要 s1 与身体的高度相同。

Answer 1

我已经检查了你的 jsfiddle 帖子 这是您需要更改的内容 删除 .st-sticky-wrap “height: auto !important;”的高度 - 删除它并添加以下样式 它的作品在页面上看到绿色背景

html,正文 { 高度：100%； 宽度：100%； 填充：0px； 边距：0px； } 。填 { 最小高度：100%； 高度：100%； } .st-sticky-wrap { 高度：100%； } #s1 { 背景：绿色； 高度：100%； } #s2 { 背景：蓝色； } #s3 { 背景：红色； } #s4 { 背景：黑色； } #s5 { 背景：黄色； }

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

干杯