Div height inside a div

Question

I'm working on a jquery plugin for my own datagrid. The problem I'm facing is a clipping of one div inside another div. I need the last div to fill the remaining space, and I would like to make it without js/jquery to calculate the height if possible. I don't even need compatibility with IE or firefox, just chrome.

Here a demostration of the problem: http://jsbin.com/ubiniy/1

As you can see, the scrollbar at the bottom is not visible. With 92% height it's visible at some dimensions, but no others.

Thanks in advance.

Answer 1

just remove the overflow:auto; from .dlgrid also you can remove padding or magin to make it up to the edge.

Or if you don't want to remove the overflow:auto; from .dlgrid you can make

<div>Title</div>
<div>Title 2</div>

<div class="dlInnerDiv" style="overflow:auto; height:94%;">

to

<div style="height:3%;">Title</div>
<div style="height:3%;">Title 2</div>

<div class="dlInnerDiv" style="overflow:auto; height:94%;">

more info on maybe something that might help here

Answer 2

The problem is that it inherits parent's height as you declared but there's also 2 more divs for the titles so there's no room for all since it's over the 100% and it scrolls :)

---

OK here's an approach:

However it needs to be sure that title divs are one line only or you end up with wrong calculation.

If so you add this

    <div class="dlgrid" style="overflow: hidden;......height:700px;">

    <div class="title">Title</div>
    <div>Title 2</div>
    <div class="dlInnerDiv" style="overflow:auto;">....

css:

div.title{
  line-height:20px;
}
div.title + div{
  line-height:18px;
}

or

div.title{
   height:20px;
}
div.title + div{
   height:18px;
}

In that case you have 700-20-18 = 662 or what ever heights you give to those so all is left is to:

div.dlInnerDiv{
    max-height:662px;
 }

Also you need to reset all unwanted margins and paddings like

div.dlgrid,div.dlgrid div{
   margin:0; 
   padding:0;
}

or whatever value you want but take it in consideration when summing the height above because the vertical of these have influence on it in each of the elements participating.

I hope I've understood and this is what you're after http://jsbin.com/ubiniy/23 :)

Keep in mind that this resolves only that particular issue and you might and up with undesired behavior so I do not recommend any approach like this of fixing height in dynamic content and depending on a specific case of circumstances.

My advice is to have a look how other people have solved this issue making grids or whaever there's no need to find the hot water all over again :)