容器内的可滚动div
[英]scrollable div inside container
问题描述
I have the following HTML: http://jsfiddle.net/fMs67/ .
我有以下 HTML： http : //jsfiddle.net/fMs67/ 。 I'd like to make the div2 to respect the size of div1 and scroll the contents of div3.我想让 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/ .这是我在问这个问题时过于简单化的更高级的案例： http : //jsfiddle.net/Wcgvt/ 。 I need somehow that header+it's sibling div to not overflow the parent div's size.我需要以某种方式标题+它的兄弟 div 不溢出父 div 的大小。
8 个解决方案
解决方案1
55 已采纳 2012-03-21 19:24:54
Adding position: relative to the parent, and a max-height:100% ;添加position: relative和一个max-height:100% ； on div2 works.在 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.秘诀是使用box-sizing: border-box和一些填充使第二个 div 高度为 100%，但将其内容向下移动 50px。 Then wrap the content in a div with overflow: auto to contain the scrollbar.然后用overflow: auto将内容包装在div 中以包含滚动条。 Pay attention to z-indexes to keep all the text selectable - hope this helps, several years later.注意 z-indexes 以保持所有文本可选 - 希望这会在几年后有所帮助。
解决方案2
15 2012-03-21 19:26:00
如果您将overflow: scroll放在固定高度div ，则如果内容占用太多空间， div将滚动。
解决方案3
10 2012-03-21 19:34:05
Instead of overflow:auto , try overflow-y:auto .而不是overflow:auto ，尝试overflow-y:auto 。 Should work like a charm!应该像魅力一样工作！
解决方案4
5 2012-03-21 19:27:17
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>
解决方案5
3 2012-03-22 07:05:07
i have just added (overflow:scroll;) in (div3) with fixed height.我刚刚在 (div3) 中添加了 (overflow:scroll;) 具有固定高度。
see the fiddle:- http://jsfiddle.net/fMs67/10/看小提琴：- http://jsfiddle.net/fMs67/10/
解决方案6
2 2017-10-03 20:55:52
I created an enhanced version, based on Trey Copland's fiddle, that I think is more like what you wanted.我根据 Trey Copland 的小提琴创建了一个增强版本，我认为它更像您想要的。 Added here for future reference to those who come here later.添加到这里以供以后来这里的人参考。 Fiddle example小提琴示例
<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>
解决方案7
-1 2016-06-23 02:17:25
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
解决方案8
-1 2019-05-03 17:37:29
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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.