jquery - div内的div高度

Question

我正在为我自己的数据网格开发一个 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之后所追求的:)

请记住，这仅解决了该特定问题，并且您可能会遇到不希望的行为，因此我不推荐任何像这样在动态内容中固定高度并取决于特定情况的方法。

我的建议是看看其他人是如何解决这个问题的