CODEWITHSUNDEEP
htmlcssweb
Kilobyte
Kilobyte

Reputation: 320

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?

Upvotes: 1

Views: 474

Answers (2)

Douglas
Douglas

Reputation: 37761

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

Upvotes: 1

mrijneveld
mrijneveld

Reputation: 30

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

Upvotes: 0

Related Questions