iframe風格的div內容大於div本身

Question

我想做一個<div>一個非常長的高度（2000px，或多或少），我想只顯示它的一些（400px-500px），並有一個滾動條來瀏覽它。

我不知道從哪裏開始，有沒有人有一些文章/怎麼樣或給我指示如何做到這一點？謝謝。

Answer 1

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

HTML

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

CSS

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

Answer 2

試試這個它會工作 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 3

查看「溢出」屬性在CSS：https://developer.mozilla.org/en-US/docs/CSS/overflow

這將允許您指定外部容器如何處理其內容的大小。