Css 具有动态剩余高度和滚动条的Div

我正试图为我的特殊问题找到一个解决方案。 我有两个div，第一个是动态高度的头部。 第二个div应该填满页面的剩余空间，如果内容太大，应该出现一个滚动条

问题是，我的第二个div的高度设置方案与滚动条不匹配

这很难解释，看看我的代码，我做了评论，所以你应该明白我的问题

HTML:

另请参阅。 将溢出更改为“自动”或“滚动”，然后查看整个第二个div是如何消失的。为什么会发生这种情况？我找不到解决这个问题的办法

---

提前谢谢

您必须在div中使用width:100%，overflow:hidden；体内

#remaining_height_with_scrollbar {
   background-color: green;
   height: 100%;
   overflow: scroll;
   width: 100%;
   /* If you change this to "scroll" or "auto", the content disappears */
}

---

演示：

我找到了问题的解决方案，但只使用了表格布局：

但是没有表格的解决方案会更好。

HTML:

<div class="table container">
    <div class="table-row header">
        <div>This is the header whose height is unknown</div>
        <div>This is the header whose height is unknown</div>
        <div>This is the header whose height is unknown</div>
    </div>
    <div class="table-row body">
        <div class="table-cell body-content-outer-wrapper">
            <div class="body-content-inner-wrapper">
                <div class="body-content">
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                </div>
            </div>
        </div>
    </div>
</div>

发件人：

---

JSFiddle:

之后我得到了一个滚动条，但是第二个div占用了太多的高度，而不仅仅是剩余的空间。它不使用剩余的高度，而是窗口高度。@SBBS这里有一个跨浏览器解决方案：和fiddle:

#remaining_height_with_scrollbar {
   background-color: green;
   height: 100%;
   overflow: scroll;
   width: 100%;
   /* If you change this to "scroll" or "auto", the content disappears */
}

display:table;

<div class="table container">
    <div class="table-row header">
        <div>This is the header whose height is unknown</div>
        <div>This is the header whose height is unknown</div>
        <div>This is the header whose height is unknown</div>
    </div>
    <div class="table-row body">
        <div class="table-cell body-content-outer-wrapper">
            <div class="body-content-inner-wrapper">
                <div class="body-content">
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                    <div>This is the scrollable content whose height is unknown</div>
                </div>
            </div>
        </div>
    </div>
</div>

.table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
}

.container {
    width: 400px;
    height: 300px;
}

.header {
    background: cyan;
}

.body {
    background: yellow;
    height: 100%;
}

.body-content-outer-wrapper {
    height: 100%;
}

.body-content-inner-wrapper {
    height: 100%;
    position: relative;
    overflow: auto;
}

.body-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}