How to center scrollable content on a div with dynamic height?
I am creating a web application and I am currently trying to do a main project. Therefore, the page should have multiple columns that should be able to float along the x-axis. They are now static in width, and their height will be 100% of the browser window. Here is a JSFiddle: http://jsfiddle.net/qAUXQ/
These columns must contain vertically centered content. However, if the content of one column is taller than the browser window, a scroll bar should appear. The problem is, since the height is dynamic, the only way I can think of (and google it) is to use the method display: table
.
The problem is that the scrollbars on the div are not working. Therefore, when the browser window is too small, the user simply does not see it. It doesn't scroll!
Below is the code if you don't want to use the 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;
}
source to share
Having a little time, understanding exactly what you are asking. But from what I'm collecting you can try adding height and use
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 http://jsfiddle.net/qAUXQ/7/ for complete solution (updated)
Overridden for centering. Wanting to use the spreadsheet and tabletop cell in the direction you were going. Figured it out with a small list and it centers, the longer list it scrolls. Hope this helps.
source to share
Ok so I finally figured it out. It was pretty easy, but I was just "blind" ...
Here is a fiddle: http://jsfiddle.net/qAUXQ/6/
Just do it like this:
div bar
div container
div contents
contents
Then you will do some CSS:
.bar {
overflow-x: hidden;
}
.container {
display: table;
}
.contents {
display: table-cell;
vertical-align: middle;
}
I first set .bar to display: table
. So the scrollbar didn't work. The scrollbar is now set to .bar.
source to share
I dont know exactly what you are trying to do, when i am not wrong you want your .bar div to be 100% high 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 an extra div tag to 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 table elements for vertical and horizontal alignment. There is no overflow there. You now have 3 divs to set up the table and one Div to control overflow and scrollbar.
like this? http://jsfiddle.net/WAjdp/
source to share