Html 容器内的可滚动div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9811465/
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
scrollable div inside container
提问by Dan Leahu
I have the following HTML: http://jsfiddle.net/fMs67/. I'd like to make the div2 to respect the size of div1 and scroll the contents of div3.
我有以下 HTML：http: //jsfiddle.net/fMs67/。我想让 div2 尊重 div1 的大小并滚动 div3 的内容。
Is this possible?
这可能吗？
Thanks!
谢谢！
UPDATE-1:
更新-1：
This is the more advanced case that I oversimplified when I asked the question: http://jsfiddle.net/Wcgvt/. I need somehow that header+it's sibling div to not overflow the parent div's size.
这是我在问这个问题时过于简单化的更高级的案例：http: //jsfiddle.net/Wcgvt/。我需要以某种方式标题+它的兄弟 div 不溢出父 div 的大小。
回答by Chris Carew
Adding position: relativeto the parent, and a max-height:100%; on div2 works.
添加position: relative到父级，和一个max-height:100%; 在 div2 上工作。
<body>
<div id="div1" style="height: 500px;position:relative;">
<div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>
</body>?Update: The following shows the "updated" example and answer. http://jsfiddle.net/Wcgvt/181/
更新：以下显示了“更新”的示例和答案。http://jsfiddle.net/Wcgvt/181/
The secret there is to use box-sizing: border-box, and some padding to make the second div height 100%, but move it's content down 50px. Then wrap the content in a div with overflow: autoto contain the scrollbar. Pay attention to z-indexes to keep all the text selectable - hope this helps, several years later.
秘诀是使用box-sizing: border-box, 和一些填充使第二个 div 高度为 100%，但将其内容向下移动 50px。然后将内容包装在一个 div 中overflow: auto以包含滚动条。注意 z-indexes 以保持所有文本可选 - 希望这会在几年后有所帮助。
回答by Frank van Wijk
If you put overflow: scrollon a fixed height div, the divwill scroll if the contents take up too much space.
如果你设置overflow: scroll一个固定的高度div，div如果内容占用太多空间，它将滚动。
回答by NotJay
Instead of overflow:auto, try overflow-y:auto. Should work like a charm!
而不是overflow:auto，尝试 overflow-y:auto。应该像魅力一样工作！
回答by Trey Copeland
Is this what you are wanting?
这是你想要的吗？
<body>
<div id="div1" style="height: 500px;">
<div id="div2" style="height: inherit; overflow: auto; border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>
</body>回答by Shailender Arora
i have just added (overflow:scroll;) in (div3) with fixed height.
我刚刚在 (div3) 中添加了 (overflow:scroll;) 具有固定高度。
see the fiddle:- http://jsfiddle.net/fMs67/10/
回答by Katie Cunningham
function start() {
document.getElementById("textBox1").scrollTop +=5;
scrolldelay = setTimeout(function() {start();}, 40);
}
function stop(){
clearTimeout(scrolldelay);
}
function reset(){
var loc = document.getElementById("textBox1").scrollTop;
document.getElementById("textBox1").scrollTop -= loc;
clearTimeout(scrolldelay);
}
//adjust height of paragraph in css
//element textbox in div
//adjust speed at scrolltop and start 回答by MichaelC
I created an enhanced version, based on Trey Copland's fiddle, that I think is more like what you wanted. Added here for future reference to those who come here later. Fiddle example
我根据 Trey Copland 的小提琴创建了一个增强版本，我认为它更像您想要的。添加到这里以供以后来这里的人参考。 小提琴示例
<body>
<style>
.modal {
height: 390px;
border: 5px solid green;
}
.heading {
padding: 10px;
}
.content {
height: 300px;
overflow:auto;
border: 5px solid red;
}
.scrollable {
height: 1200px;
border: 5px solid yellow;
}
.footer {
height: 2em;
padding: .5em;
}
</style>
<div class="modal">
<div class="heading">
<h4>Heading</h4>
</div>
<div class="content">
<div class="scrollable" >hello</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
回答by Debbie Kurth
The simplest way is as this example:
最简单的方法是作为这个例子：
<div>
<div style=' height:300px;'>
SOME LOGO OR CONTENT HERE
</div>
<div style='overflow-x: hidden;overflow-y: scroll;'>
THIS IS SOME TEXT
</DIV>
You can see the test cases on: https://www.w3schools.com/css/css_overflow.asp
您可以在以下位置查看测试用例：https: //www.w3schools.com/css/css_overflow.asp
