在内部 div 上设置最大高度，以便出现滚动条，但不在父 div 上 [英] Set max-height on inner div so scroll bars appear, but not on parent div

问题描述

我按照下面的代码设置了我的 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.net/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.net/C8MuZ/11/

这篇关于在内部 div 上设置最大高度，以便出现滚动条，但不在父 div 上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！