Timm Schäffner Timm Schäffner - 6 months ago 26
CSS Question

Variable height DIV with minimum distance from top & bottom of the viewport

Okay, I have a div that's supposed to be a widget for controlling stuff in other divs.

It is to be positioned above (as in z-index) everything else and must be a specific distance from the top of the viewport (say, 10em). Since the page may not exceed the viewport it could either be position: fixed or position: absolute. Now, I want it to be of viariable height (depending on content) but also have a min-height and never be closer than, say, 5 em to the bottom of the viewport.

What I would like to write is:

.myDiv {
position: absolute;
top: 10em;
min-height: 8em;
max-height: 100% - 15em; //which doesn't work
overflow: auto;

Is something like that at all possible using css only?


It's apparently not possible using css alone. I'm using javascript now. Here's the code:

//within a prototype.js environment
var innerHeight = (typeof window.innerHeight === 'undefined') ? document.documentElement.clientHeight : window.innerHeight;
var emSize = parseFloat($(document.body).getStyle('font-size'));
someElement.style['maxHeight'] = (innerHeight - (14 * emSize)).toString() + 'px';