Question

我在div显示表上有3列页面校样。首先，这里是jsfiddle https://jsfiddle.net/9mzuxza9/2/ 在左侧内侧我放置了许多行的表格及其结果当col内的内容高于容器并且容器扩展他的高度但是我希望容器保持与屏幕没有内容相同的高度。 CSS

 html,body{
            width: 100%;
            height: 100%;
        }
        .row{
            table-layout: fixed;
            display: table;
            height: 100%;
            width: 100%;
            border: 1px solid grey;
        }
        .left {
            width:300px;
            height:100%;
            display: table-cell;
        }
        .middle {
            height:100%;
            display: table-cell;
            width:100%;
        }
        .right {
            height:100%;
            width:300px;
            display: table-cell;
        }

HTML

        <div class="row">
        <div class="left"> Some content <table border="1">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <!-- ...more rows-->
                </tbody>
            </table>
        </div>
        <div class="middle"> This should fill the space left </div>
        <div class="right"> Some other content </div>
    </div>

Answer 1

你需要一个固定的高度和溢出：滚动。这些不适用于table-cell元素，因此您必须使用浮动元素或内联块元素执行外部div布局：

div.left {
    float: left;
    overflow: scroll;
    height: 100px; // or whatever
}

或者，保留div.left，并在子表周围使用单独的容器div 。比较这个问题：How to create a table cell that scrolls when overflowing

内容扩展容器

1 个答案: