How can i make 3 independently scrollable columns

问题:

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?

回答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%; }

回答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. :)