jquery - CSS 响应式引导 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。

但多余的内容将被隐藏。

检查这个小提琴。

Answer 2

尽管没有 CSS 和 Jquery 很难重新生成界面，但我认为您需要的高度不要超过浏览器视口的高度。您可以将右侧面板指定为单独的类，即.right-panel并将其设置为带有 CSS3vh值的 max-height。所以它看起来像：

.right-panel{
height: 100vh;
}

希望有帮助。