How can i make 3 independently scrollable columns

Question

I have a website on which I want to have 3 independently scrollable <div> elements.

The html code is this:

<div class="sidebar">Content</div>
<div id="window">Some very long content</div>
<div class="sidebar">More content</div>

The associated css is this:

body {
    overflow: hidden;
}

#window {
    font-family: monospace;
    overflow: auto;
    width: 70%;
    float: left;
    height: 100%;
}

.sidebar {
    overflow: auto;
    width: 15%;
    float: left;
    height: 100%;
}

From what I saw via searching the internet, this is supposed to work. But I don't see any scrollbars at all.

Why?

How can i fix this issue?

Answer 1

height: 100% as a percentage only affects the height of the element if that element's parent has an explicit height. The height of the body tag by default is the height of the content, not the full height of the window.

Try adding this:

html, body { height: 100%; }

Answer 2

Because of your height: 100%; your divs will just adjust to the height of the text. By changing your height to for example: 250px your code will work. Hope this helps. :)