CODEWITHSUNDEEP
htmlcsscss-tables
James Kyle
James Kyle

Reputation: 4178

Scrolling Layout with CSS display tables

I'm trying to make a two column layout using display tables, however I can't figure out how to make this a fixed height (height of browser) and have the "cells" scroll to show content when it overflows.

I thought this would be a simple thing to do but it is surprisingly difficult.

As you can see I've tried even adding a special .scroll <div> which does pretty much nothing.

HTML

<div class="dashboard">
    <div class="side panel">
        <div class="scroll">
            <div style="height: 400px">
            asdfasdf
            </div>
        </div>
    </div>
    <div class="main panel">
        <div style="height: 400px">

        </div>
    </div>
</div>

CSS

html, body, .dashboard {
    position: absolute;
    display: block;
    top: 0; bottom: 0; height: 100%;
    left: 0; right: 0;  width: 100%;
}
.dashboard {
    display: table;
}
.panel {
    display: table-cell;
    vertical-align: top;
}
.panel .scroll {
    display: block;
    overflow: auto;
}
.side.panel {
    width: 200px;
}

SCSS: http://jsfiddle.net/JamesKyle/j7U5E/

CSS: http://jsfiddle.net/JamesKyle/fScW3/

Upvotes: 2

Views: 7973

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157404

Use overflow-y: scroll; instead of using overflow: auto;, because overflow: auto; increases the height of your div but won't make it scroll the content inside...

My Fiddle

Upvotes: 1

Related Questions