html - 内容大于 div 本身的 iframe 样式 div

Question

我想制作一个<div>非常长的高度（2000px，或多或少），我只想显示其中的一部分（400px-500px），并有一个滚动条来浏览它。

我不知道从哪里开始，有没有人有一些文章/操作方法或指导我如何做到这一点？谢谢。

Answer 1

试试这个它会工作HTML

<div id="main_div">

     // Your contents

</div> 

CSS

<style type="text/css">
    #main_div {
      width:200px;
      height:400px;
      overflow:scroll;
    }
    // stylish scroll bar
    #main_div{
       overflow: scroll;
    }
    #main_div::-webkit-scrollbar {
        background: transparent;
        height: 4px;
        overflow: visible;
        width: 4px;
    }
    #main_div::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.9);
        -webkit-border-radius:5px;
    }
    #main_div::-webkit-scrollbar-thumb:hover{
        background-color: rgba(0, 0, 0, 0.6);   
    }
    #main_div::-webkit-scrollbar-corner {
        background: transparent;
    }
</style>

Answer 2

您需要做的就是指定height您的容器和overflow方法：

HTML

<div class="container">
    <!-- content here -->
</div>

CSS

.container {
    height: 400px;
    overflow-y: scroll;
}

Answer 3

查看 CSS 中的“溢出”属性：https ://developer.mozilla.org/en-US/docs/CSS/overflow

这将允许您指定外部容器如何处理其内容的大小。