Question

我根据下面的代码设置了我的HTML，CSS。我还添加了一个JSFiddle链接，因为查看代码的运行会更方便。

我遇到的问题是，当#inner-right div中的#right-col div中有大量文字时，我想要为#inner-right 显示一个滚动条仅即可。我当前的代码显示了两个滚动条：#inner-div和#right-col。如果我将#right-col上的CSS更改为overflow: hidden以便摆脱外部滚动条，内部滚动条也会消失，#inner-right不再尊重{{1}规则。

如何设置它以使滚动条仅在max-height内容显示为内容变得过大时显示。

JSFiddle

#inner-right

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

Answer 1

如果你做

外部div中的

overflow: hidden和内部div中的overflow-y: scroll它将起作用。

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

Answer 2

设置：

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

这将解决您的问题。

Answer 3

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

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

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

Answer 4

这样可以正常工作，将高度设置为所需的像素

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

在内部div上设置max-height，以便显示滚动条，但不显示父div

4 个答案: