Question

我正在为自己的数据网格工作jquery插件。我面临的问题是在另一个div中剪切一个div。我需要最后一个div来填充剩余空间，如果可能的话，我想在没有js / jquery的情况下计算高度。我甚至不需要兼容IE或Firefox，只需要Chrome。

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

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

提前致谢。

Answer 1

只需从overflow:auto;移除.dlgrid，您也可以删除填充或magin以使其达到边缘。

或者，如果您不想从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%;">

有关可能有用的内容的更多信息here

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：）

请注意，这只会解决该特定问题，您可能会遇到不良行为，因此我不建议采用任何方法来修复动态内容中的高度，具体取决于具体情况。

我的建议是看看其他人如何解决这个问题，制作网格，或者不需要再次找到热水：）

div内的div高度

2 个答案: