div内的div高度

Question

我正在为自己的datagrid开发一个jquery插件。 我面临的问题是将一个div裁剪到另一个div中。 我需要最后一个div来填充剩余的空间，如果可能的话，我想使其不使用js / jquery来计算高度。 我什至不需要与IE或Firefox兼容，仅需兼容chrome。

这里是问题的演示： http : //jsbin.com/ubiniy/1

如您所见，底部的滚动条不可见。 高度为92％，在某些尺寸上可见，但其他尺寸则看不到。

提前致谢。

Answer 1

只需删除overflow:auto; 您也可以从.dlgrid中删除填充或空白以使其边缘突出。

或者，如果您不想删除overflow:auto; 从.dlgrid您可以制作

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

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

至

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

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

上或许真的详细信息，这可能有助于在这里

Answer 2

问题是它继承了您声明的父级的高度，但标题还有2个div，因此没有空间容纳所有内容，因为它超过了100％并且会滚动:)

---

好的，这是一种方法：

但是，需要确保标题div仅是一行，否则最终会导致计算错误。

如果是这样，您添加此

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

要么

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

在这种情况下，您有700-20-18 = 662或您赋予这些身高以使剩下的一切就是：

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

另外，您需要重置所有不需要的边距和填充，例如

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

或您想要的任何值，但在对上方的高度求和时要加以考虑，因为这些值的垂直方向会影响参与的每个元素。

我希望我已经理解了，这就是您追求的http://jsbin.com/ubiniy/23 :)

请记住，这只能解决特定问题，并且您可能会出现不希望的行为，因此，我不建议像在固定动态内容中的高度以及根据具体情况使用这种方法。

我的建议是看看其他人是如何解决这个问题的，无论是使用网格还是任何方式，都无需再次寻找热水:)