div в div iframe с содержимым больше самого div

Question

Я хочу сделать <div> с очень длинной высотой (2000px, более или менее), и я хочу показать только некоторые из них (400px-500px) и иметь scrollbar, чтобы просмотреть его.

Я не знаю, с чего начать, есть ли у кого-нибудь какие-либо статьи/инструкции или дайте мне указания о том, как это сделать? Благодарю.

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

Это позволит определить, как ваш внешний контейнер обрабатывает размер его содержимого.