应用错误收集

容器中引导列的高度为100％

时间：2015-01-21 16:03:58

标签： javascript html css angularjs twitter-bootstrap

我有一个3个嵌套在容器中的引导行，我希望每行的高度为100％，如果它们溢出则应用垂直滚动。

当前布局

Current layout

DOM

<body>
    <div id="wrapper">
        <nav...

        </nav>

        <div id="page-wrapper" class="container-fluid">
            <div class="content" ui-view>
                <!-- content starts here (loaded by angular)-->
                <div class="row">
                    <div class="col-md-4 nopadding">
                        ...
                    </div>
                    <div class="col-md-4">
                        <!-- example column content -->
                        <div class="list-group">
                            <a class="list-group-item" ng-repeat="..."></a>
                        </div>
                    </div>
                    <div class="col-md-4 nopadding">
                        ...
                    </div>
                </div>
                <!-- content ends here -->
            </div>
        </div>
        ...

我现在尝试了很多东西，例如负边距，绝对定位，将列显示为 table / table-cells 。但是，每次填充内容时，列表组会扩展到显示所有项目所需的高度，从而推动整个网站。

基于其他示例，它应该以这种方式工作（虽然它没有 - ＆gt;没有效果）：

body, html {
    height: 100%;
}

.table-row { // applied to "row"
    display: table;

    > [class*="col-"] { // applied to columns
        vertical-align: top;
        float: none;
        display: table-cell;
    }
}

.overflow-auto { // applied to the list groups inside the columns
    height: 100% !important;
    display: block;
    overflow-y: scroll;
}

任何人都知道如何解决这个问题？

尝试了一些例子：

0 个答案:

没有答案