Установите max-height на внутренний div, поэтому появятся полосы прокрутки, но не на родительском div

У меня есть мой HTML, CSS настроен в соответствии с приведенным ниже кодом. Я также добавил ссылку JSFiddle, так как будет гораздо удобнее видеть код в действии.

Проблема, с которой я сталкиваюсь, заключается в том, что когда в div #inner-right внутри div #right-col есть много текста, я хочу, чтобы полоса прокрутки появлялась только для #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>

Ответ 1

Если вы делаете

overflow: hidden во внешнем div и overflow-y: scroll во внутреннем div он будет работать.

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

Ответ 2

установите это:

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

это решит вашу проблему.

Ответ 3

Для этого может быть проще использовать JavaScript или jquery. Предполагая, что высота заголовка и нижнего колонтитула равна 200, тогда код будет:

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

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

Ответ 4

Это будет работать отлично, установите высоту нужного пикселя

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