CODEWITHSUNDEEP
htmlcssweb-applications
Student of Hogwarts
Student of Hogwarts

Reputation: 1138

How to center scrollable contents on a div with dynamic height?

I'm making a web app, and currently I'm trying to get the basic design done. So there should be a few columns on the page that should be able to float on the x-axis. They are for now static in width, and the height of them is going to be 100 % of the browser window. Here is a JSFiddle: http://jsfiddle.net/qAUXQ/

Inside these columns, there should be contents that is centered vertically. However, if the contents of one column is higher than the browser window, there should appear a scroll bar. The problem is that since the height is dynamical, the only way I can think of (and find on Google) is to use the display: table method.

The problem is that the scrollbars on the div doesn't work. So when the browser window is too small, the user simply cannot see it. It's not scrollable!

Below is the code if you don't want to use JSFiddle:

<div class="bar">
    <div class="middle">
        <div class="contents">
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;

}

body {
    background: #f4f1ed;
}

.bar {
    height: 100%;
    border-style: solid;
    width: 360px;
    display: table;
    border-width: 0 1px;
    border-color: #ddd;
    position: absolute;
    transition: left 500ms;
    -moz-transition: left 500ms;
    -webkit-transition: left 500ms;
    -o-transition: left 500ms;
    z-index: 10;
    background: #f2f2f2;
}

.bar div.middle {
    display: table-cell;
    vertical-align: middle;
}

.bar div.contents {
    padding-left: 60px;
    overflow-y: scroll;
    overflow-x: hidden;
}

Upvotes: 3

Views: 7564

Answers (3)

Taraes
Taraes

Reputation: 147

Having a bit of a time understanding precisely what you're asking. But from what I'm gathering, you may want to try adding a height and using

overflow:scroll;

EDIT (updated)

Had to shuffle it around a bit, but this works:

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: #f4f1ed;
}
.bar {
    height: 100%;
    border-style: solid;
    width: 360px;
    border-width: 0 1px;
    border-color: #ddd;
    position: absolute;
    transition: left 500ms;
    -moz-transition: left 500ms;
    -webkit-transition: left 500ms;
    -o-transition: left 500ms;
    z-index: 10;
    background: #f2f2f2;
    overflow:scroll;
}
.bar div.middle {
    height: 100%;
    display: table;
}
.bar div.contents {
    padding-left: 60px;
    display: table-cell;
    vertical-align:middle;
}

Can check out http://jsfiddle.net/qAUXQ/7/ for the full solution (updated)

Reupdated for the centering. Wanting to use table and table-cell in the direction you were going. Checked it out with minor list and it centers, longer list, it scrolls. Hope this helps.

Upvotes: 1

Student of Hogwarts
Student of Hogwarts

Reputation: 1138

Okay, so I figured it out myself finally. It was pretty easy, but I was just "blind"...

Here is the fiddle: http://jsfiddle.net/qAUXQ/6/

Just do it like this:

div bar
    div container
        div contents
            contents

Then you do some CSS:

.bar {
    overflow-x: hidden;
}

.container {
    display: table;
}

.contents {
    display: table-cell;
    vertical-align: middle;
}

What I did first was setting the .bar to display: table. So the scrollbar didn't work. Now the scrollbar is set on the .bar.

Upvotes: 1

Chris
Chris

Reputation: 2267

I dont know exactly what you are trying to do, when im not misstaken you want your .bar div to be 100% height with a scrollbar and your .middle and .contents in the vertical center. So just try changing the following things:

.bar {display:block; overflow: auto; height: 100%; min-height:100%; width:100%; }

add a additional div tag for the display:table :

div.table{
height:100%;
border-style: solid;
width: 360px;
display: table;
border-width: 0 1px;
border-color: #ddd;
position: absolute;
transition: left 500ms;
-moz-transition: left 500ms;
-webkit-transition: left 500ms;
-o-transition: left 500ms;
z-index: 10;
background: #f2f2f2;}

You just use the rest of the two table elements for vertical and horizontal align. No overflow there. Now you have 3 divs for setting up the table and one Div thats controlling the overflow and the scrollbar.

like this? http://jsfiddle.net/WAjdp/

Upvotes: 0

Related Questions