Html 在内部 div 上设置最大高度，以便出现滚动条，但不在父 div 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15632287/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set max-height on inner div so scroll bars appear, but not on parent div
提问by xbonez
I have my HTML, CSS set up as per the code below. I have also added a JSFiddle link since it will be far more convenient to see the code in action.
我按照下面的代码设置了我的 HTML、CSS。我还添加了一个 JSFiddle 链接，因为它会更方便地查看正在运行的代码。
The problem I'm having is that when there is a lot of text in the #inner-rightdiv within the #right-coldiv, I want a scrollbar to appear for #inner-rightonly. My current code shows two scrollbars: #inner-divand #right-col. If I change the CSS on #right-colto overflow: hiddenso as to get rid of the outer scroll-bar, the inner scroll bar disappears as well, and #inner-rightno longer respects the max-heightrule.
我遇到的问题是，当#inner-rightdiv 中的#right-coldiv 中有很多文本时，我希望#inner-right只为. 我当前的代码显示两个滚动条：#inner-div和#right-col。如果我改变对CSS#right-col来overflow: hidden，以摆脱外部滚动条的，内滚动条消失的欢迎，并#inner-right不再方面的max-height规则。
How can I set it up such that the scroll bar only shows up on #inner-rightwhen it's contents grow too large.
我如何设置它以便滚动条仅#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;
}<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>回答by Toon Casteele
If you make
如果你使
overflow: hiddenin the outer div and overflow-y: scrollin the inner div it will work.
overflow: hidden在外部 div 和overflow-y: scroll内部 div 中，它将起作用。
回答by Code L?ver
set this :
设置这个：
#inner-right {
height: 100%;
max-height: 96%;//change here
overflow: auto;
background: ivory;
}
this will solve your problem.
这将解决您的问题。
回答by Tobiloba
This would work just fine, set the height to desired pixel
这会工作得很好，将高度设置为所需的像素
#inner-right{
height: 100px;
overflow:auto;
}
回答by Igor Krupitsky
It might be easier to use JavaScript or jquery for this. Assuming that the height of the header and the footer is 200 then the code will be:
为此使用 JavaScript 或 jquery 可能更容易。假设页眉和页脚的高度为 200，那么代码将是：
function SetHeight(){
var h = $(window).height();
$("#inner-right").height(h-200);
}
$(document).ready(SetHeight);
$(window).resize(SetHeight);
