CODEWITHSUNDEEP
htmlcss
Pacha
Pacha

Reputation: 1526

iframe-style div with content bigger than the div itself

I want to make a <div> with a really long height (2000px, more or less) and I want to only show some of it (400px-500px), and have a scrollbar to browse through it.

I have no idea where to start, does anyone has some articles/how-tos or give me directions on how to do this? Thanks.

Upvotes: 1

Views: 3383

Answers (3)

clansaur
clansaur

Reputation: 751

Look at the "overflow" property in CSS: https://developer.mozilla.org/en-US/docs/CSS/overflow

This will allow you specify how your outer container handles the size of its content.

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16675

All you need to do is specify the height of your container and the overflow method:

HTML

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

CSS

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

Upvotes: 1

Naveen D Almeida
Naveen D Almeida

Reputation: 877

Try this it will work 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>

Upvotes: 1

Related Questions