容器内的可滚动div答案

【问题标题】：scrollable div inside container容器内的可滚动div
【发布时间】：2012-03-21 19:22:54
【问题描述】：

我有以下 HTML：http://jsfiddle.net/fMs67/。我想让 div2 尊重 div1 的大小并滚动 div3 的内容。

这可能吗？

谢谢！

更新-1：

这是我在提出问题时过度简化的更高级的案例：http://jsfiddle.net/Wcgvt/。我需要以某种方式使标题+它的兄弟 div 不会溢出父 div 的大小。

【问题讨论】：

您好 TCC - 感谢您的提问！实际上我的情况比这更复杂一些——我用一个新的提琴手添加了 UPDATE-1。
在不指定硬高度的情况下，您要做的非常困难，即将 d3-2 设置为 d3 的最大高度减去 d3-1 的高度。

标签： html css

【解决方案1】：

将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>

更新：下面显示了“更新”的示例和答案。 http://jsfiddle.net/Wcgvt/181/

其中的秘密是使用box-sizing: border-box 和一些内边距使第二个 div 高度为 100%，但将其内容向下移动 50px。然后用overflow: auto 将内容包装在一个div 中以包含滚动条。注意 z-indexes 以保持所有文本可选 - 希望几年后这会有所帮助。

【讨论】：

【解决方案2】：

如果您将overflow: scroll 放在固定高度div 上，如果内容占用太多空间，div 将滚动。

【讨论】：

【解决方案3】：

试试overflow-y:auto，而不是overflow:auto。应该像魅力一样工作！

【讨论】：

【解决方案4】：

这是你想要的吗？

<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>

http://jsfiddle.net/fMs67/1/

【讨论】：

【解决方案5】：

我刚刚在 (div3) 中以固定高度添加了 (overflow:scroll;)。

看小提琴：- http://jsfiddle.net/fMs67/10/

【讨论】：

【解决方案6】：

我根据 Trey Copland 的小提琴创建了一个增强版本，我认为它更像您想要的。在这里添加以供以后来这里的人参考。 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】：

最简单的方法就是这个例子：

<div>
   <div style=' height:300px;'>
     SOME LOGO OR CONTENT HERE
   </div>
   <div style='overflow-x: hidden;overflow-y: scroll;'> 
      THIS IS SOME TEXT
   </DIV>

您可以在以下位置查看测试用例： https://www.w3schools.com/css/css_overflow.asp

【讨论】：

【解决方案8】：

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

【讨论】：