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 :)

請記住，這只能解決特定問題，並且您可能會出現不希望的行為，因此，我不建議像在固定動態內容中的高度以及根據具體情況使用這種方法。

我的建議是看看其他人是如何解決這個問題的，無論是使用網格還是任何方式，都無需再次尋找熱水:)