Ustaw maksymalną wysokość na wewnętrznym div, tak aby pojawiły się paski przewijania, ale nie na div rodzica

Question

Mam mój kod HTML, CSS skonfigurowany zgodnie z poniższym kodem. Dodałem również link JSFiddle, ponieważ znacznie wygodniej będzie zobaczyć kod w akcji.

Problem mam jest to, że gdy nie ma dużo tekstu w div #inner-right w #right-col div, chcę pasek przewijania do pojawiają się na #inner-righttylko. Mój obecny kod pokazuje dwa paski przewijania: #inner-div i #right-col. Jeśli zmienię CSS na #right-col na overflow: hidden, aby pozbyć się zewnętrznego paska przewijania, wewnętrzny pasek przewijania również zniknie, a #inner-right nie będzie już dłużej przestrzegać reguły max-height.

Jak ustawić tak, aby pasek przewijania pojawiał się tylko na #inner-right, gdy jego zawartość jest zbyt duża.

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

Jeśli się

overflow: hidden w zewnętrznym div i overflow-y: scroll w wewnętrznej div będzie działać.

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

Answer 2

zestaw to:

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

to rozwiąże problem.

Answer 3

To może być łatwiejsze w użyciu JavaScript lub jQuery do tego. Zakładając, że wysokość nagłówka i stopki wynosi 200 to kod będzie:

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

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

Answer 4

To będzie działać dobrze, ustawić wysokość do żądanej piksela

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