html - 在内部 div 上设置最大高度，以便出现滚动条，但不在父 div 上

Question

我按照下面的代码设置了我的 HTML、CSS。我还添加了一个 JSFiddle 链接，因为这样可以更方便地查看实际代码。

我遇到的问题是，当#inner-rightdiv 中的#right-coldiv 中有很多文本时，我希望滚动条#inner-right 仅显示. 我当前的代码显示了两个滚动条：#inner-div和#right-col. 如果我将 CSS 更改#right-col为overflow: hidden以摆脱外部滚动条，则内部滚动条也会消失，并且#inner-right不再遵守max-height规则。

我该如何设置它，以便滚动条仅#inner-right在其内容变得太大时才显示。

JSFiddle

html, body {
    height: 100%;    
}
#wrapper {
    height: 100%;
    display: table;
    width: 700px;
}
#header, #footer {
    display: table-row;
    height: 30px;
}
#body {
    height: 100%;
    display: table-row;
    background: rgba(255, 0, 0, 0.5);
}
#left-col, #right-col {
    display: inline-block;
    width: 320px;
    height: 100%;
    max-height: 100%;
    margin-right: 20px;
    border: 2px black solid;
    vertical-align: top;
    padding: 3px;
    overflow: auto;    
}
#inner-right {
    height: 100%;
    max-height: 100%;
    overflow: auto;
    background: ivory;
}

<div id="wrapper">
    <div id="header">Header</div>
    <div id="body">
        <div id="left-col">
            Lorem ipsum ... little text
        </div>
        <div id="right-col">
            <div id="header-text">Header</div>
            <div id="inner-right">
            Lorem ipsum ...lots of text
            </div>
        </div>
    </div>
    <div id="footer">Footer</div>
</div>

Answer 1

如果你做

overflow: hidden在外部 div 和overflow-y: scroll内部 div 中它会起作用。

http://jsfiddle.net/C8MuZ/11/

Answer 2

这会很好，将高度设置为所需的像素

#inner-right{
            height: 100px;
            overflow:auto;
            }

Answer 3

设置这个：

#inner-right {
    height: 100%;
    max-height: 96%;//change here
    overflow: auto;
    background: ivory;
}

这将解决您的问题。

Answer 4

为此使用 JavaScript 或 jquery 可能更容易。假设页眉和页脚的高度是 200，那么代码将是：

function SetHeight(){
    var h = $(window).height();
    $("#inner-right").height(h-200);    
}

$(document).ready(SetHeight);
$(window).resize(SetHeight);