CODEWITHSUNDEEP
htmlcss
Ben Schäffner
Ben Schäffner

Reputation: 360

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?

Upvotes: 1

Views: 7261

Answers (5)

Sparsh Khandelwal
Sparsh Khandelwal

Reputation: 26

Although it is late, but to help other people searching for this, you can use calc() function of css3. It can be used like below - 

.myDiv {
  position: absolute;
  top: 10em;
  min-height: 8em;
  max-height: calc(100% - 15em);
  overflow: auto;
}

This function is not supported on older browsers and we can have any of the following mathematical operators inside it - + - * /

Upvotes: 1

Ben Schäffner
Ben Schäffner

Reputation: 360

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';

Upvotes: 1

Rhys
Rhys

Reputation: 2877

I think you are over complicating this. Why not try this. It just adds a little padding at the top, or if you want you can use margin-top depending on what your other divs are doing.

.myDiv  {

postion: absolut;
padding-top: 10em;
min-height: 100px;
max-height: 98%;
overflow: auto;

Upvotes: 0

Solid I
Solid I

Reputation: 690

Timm,

Firstly, I'm not sure why you are using em, but whatever works for you i guess.

You are pretty much there, here's the code i used to do what you want, the only thing is that instead of a fixed distence from the btm of the viewport, I used a %. I think it behaves the way you are seeking.

`.myDiv {
position:absolute;
color:#fff;
background:#000;
top:20px;
width:150px;
min-height: 100px;
max-height: 90%;
overflow:auto;
}`

`<div class="myDiv">  
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>  
</div>`

i hope this is what you're looking for!

check it out here

Upvotes: -1

Kraz
Kraz

Reputation: 7090

Why don't you simply use max-height:98%; ?

This way you'll always have some space at the bottom (but not a fixed space).

I think the only way to have it a fixed space would be to use javascript to get the viewport height and set your widget max-height accordingly.

Upvotes: 0

Related Questions