logo标签列表

容器内可滚动的div

htmlcss
46

我有以下的HTML代码：http://jsfiddle.net/fMs67/。我想让div2与div1相同大小，并滚动div3的内容。

这是否可行？

谢谢！

更新-1：

这是我在提问时过于简化而导致更高级情况：http://jsfiddle.net/Wcgvt/。我需要让标题和它的兄弟元素不会溢出父元素的大小。

您好TCC-谢谢您的询问！实际上我的情况比那个复杂一些-我添加了一个新的Fiddler来进行UPDATE-1。 - Dan L.
你所尝试的操作很难在没有指定高度的情况下完成，即将d3-2设置为d3的高度减去d3-1的高度的最大值。 - Chris Carew
8个回答
66
将position: relative添加到父元素，并在div2上添加max-height:100%可以起作用。 

<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-index以保持所有文本可选 - 希望这可以帮助解决几年后的问题。
20
如果您在一个固定高度的
上放置overflow: scroll，那么如果内容占用太多空间，
将会滚动。
11

尝试使用overflow-y:auto替代overflow:auto，效果会更好！

8

这是您想要的吗？

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

3
2

我创建了一个增强版，基于Trey Copland的fiddle，我认为更符合你的要求。 供以后来到这里的人参考。 Fiddle示例

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

最简单的方法如下所示：

<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

-1

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接