我有我的
HTML,CSS按照下面的代码设置.我还添加了一个JSFiddle链接,因为它将更方便地查看代码.
我遇到的问题是,当#right-col div中的#inner-right div中有很多文本时,我想要一个滚动条仅出现在#内右边.我当前的代码显示了两个滚动条:#inner-div和#right-col.如果我将#右键上的CSS更改为overflow:hidden,以便摆脱外部滚动条,内滚动条也会消失,而#inner-right不再符合max-height规则.
如何设置它,使滚动条仅在#内右边显示,当内容增长太大时.
Lorem ipsum ... little text
Lorem ipsum ...lots of text
CSS
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.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;
}