CSS响应Bootstrap DIV高度

Question

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12" id="header">
            </div>
        </div>
        <div class="row-fluid">
            <div class="span10" id="body">
            </div>
            <div class="span2">
                <div class="row-fluid">
                    <div class="span12" id="updates">
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12" id="chat">
                    </div>
                </div>
            </div>
        </div>
    </div>

这是我在加载时动态填充JQuery的基本结构的代码。我希望第二行流体永远不会超过页面高度，我也不希望我的页面出现y滚动条。请用css指导我。

Answer 1

您的y滚动条取决于您填入row-fluid的数据。要删除滚动条，您可以应用样式。

max-height:500px;
overflow:hidden; 

到第二个row-fluid。

但会隐藏额外的内容。

检查this 小提琴。

Answer 2

虽然在没有CSS和Jquery的情况下重新生成界面很困难，但我认为您需要的高度不要超过浏览器视图端口高度。您可以将右侧面板指定为单独的类.right-panel，并将其设置为最大高度为CSS3 vh值。所以它看起来像：

.right-panel{
height: 100vh;
}

希望有所帮助。