Question

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

这可能吗？

谢谢！

UPDATE-1：

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

Answer 1

将position: relative添加到父级和max-height:100%;在div2工作。

<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以保持所有文本可选 - 希望这会在几年后有所帮助。

Answer 2

如果您将overflow: scroll置于固定高度div，则div会在内容占用太多空间时滚动。

Answer 3

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

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

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

Answer 5

我刚刚在（div3）中添加了（overflow：scroll;）固定高度。

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

Answer 6

＆＃13;

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

＆＃13;

Answer 7

我创建了一个基于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>

Answer 8

最简单的方法如下例：

<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

容器内的可滚动div

8 个答案: