我已经按照下面的代码设置了 HTML、CSS。我还添加了一个 JSFiddle 链接,因为它可以更方便地查看运行中的代码。
我遇到的问题是,当 #right-col
div 中的 #inner-right
div 中有很多文本时,我想要一个#inner-right
仅 出现滚动条。我当前的代码显示了两个滚动条:#inner-div
和 #right-col
。如果我将 #right-col
上的 CSS 更改为 overflow: hidden
以摆脱外部滚动条,内部滚动条也会消失,并且 #inner-right
不再遵守 max-height
规则。
我如何设置它,以便滚动条仅在内容变得太大时显示在 #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>
最佳答案
关于html - 在内部 div 上设置最大高度以便出现滚动条,但不会在父 div 上设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15632287/