问题描述
限时送ChatGPT账号..我按照下面的代码设置了我的 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
内容变大时显示.
JSFiddle
html, body {高度:100%;}#包装{高度:100%;显示:表;宽度:700px;}#页眉页脚 {显示:表格行;高度:30px;}#身体 {高度:100%;显示:表格行;背景:rgba(255, 0, 0, 0.5);}#left-col, #right-col {显示:内联块;宽度:320px;高度:100%;最大高度:100%;右边距:20px;边框:2px 黑色实心;垂直对齐:顶部;填充:3px;溢出:自动;}#右内{高度:100%;最大高度:100%;溢出:自动;背景:象牙;}
<div id="header">页眉</div><div id="body"><div id="left-col">Lorem ipsum ... 小文字<div id="right-col"><div id="header-text">页眉</div><div id="右内">Lorem ipsum ...大量文本
<div id="footer">页脚</div>
解决方案 If you make
overflow: hidden
在外部 div 和 overflow-y: scroll
在内部 div 中它会工作.
http://jsfiddle/C8MuZ/11/
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.
The problem I'm having is that when there is a lot of text in the #inner-right
div within the #right-col
div, I want a scrollbar to appear for #inner-right
only. My current code shows two scrollbars: #inner-div
and #right-col
. If I change the CSS on #right-col
to overflow: hidden
so as to get rid of the outer scroll-bar, the inner scroll bar disappears as well, and #inner-right
no longer respects the max-height
rule.
How can I set it up such that the scroll bar only shows up on #inner-right
when it's contents grow too large.
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>
解决方案
If you make
overflow: hidden
in the outer div and overflow-y: scroll
in the inner div it will work.
http://jsfiddle/C8MuZ/11/
这篇关于在内部 div 上设置最大高度,以便出现滚动条,但不在父 div 上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论