Question

我正在尝试为我的特殊问题找到解决方案。我有2个div，第一个是动态高度的标题。第二个div应填满页面的剩余空间，如果内容太大，则应显示滚动条。

问题是，我放置第二个div的高度的解决方案不适合滚动条。

很难解释，看看我的代码，我发表了评论，所以你应该解决我的问题。

HTML：

    <div id="header_with_dynamic_height">
        This<br/>is<br/>the<br/>header<br/>content.
    </div>
    <div id="remaining_height_with_scrollbar">
        Here<br/>should<br/>be<br/>a<br/>scrollbar.<br/>
        But<br/>the<br/>content<br/>overlaps.<br/>
        1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
        1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
    </div>

CSS：

    html, body {
        margin: 0; padding: 0;
        height: 100%;
    }
    #header_with_dynamic_height {
        background-color: blue;
        float: left; width: 100%;
    }
    #remaining_height_with_scrollbar {
        background-color: green;
        height: 100%;
        overflow: none;
        /* If you change this to "scroll" or "auto", the content disappears */
    }

另请参阅http://jsfiddle.net/T3qF8/2/。将溢出更改为“自动”或“滚动”，就像它应该是，并看看整个第二个div如何消失。为什么会这样？我没有找到解决方案。

提前致谢！

Answer 1

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>

CSS：

.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;
}

来自：http://blogs.msdn.com/b/kurlak/archive/2015/02/20/filling-the-remaining-height-of-a-container-while-handling-overflow-in-css.aspx

JSFiddle：http://jsfiddle.net/352ntoz2/

Answer 2

你必须在div中使用宽度：100％并溢出：隐藏;在身体

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

演示：http://jsfiddle.net/T3qF8/3/

Answer 3

我找到了解决问题的方法，但只使用了表格布局： http://jsfiddle.net/Vedkw/68/

display:table;

但没有表格的解决方案会好得多。

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

3 个答案: