div內的div高度

我正在爲我自己的數據網格工作一個jquery插件。我面臨的問題是另一個div內的一個div的剪輯。我需要最後一個div來填充剩餘空間，並且我希望在沒有js/jquery的情況下儘可能地計算高度。我甚至不需要與IE或Firefox的兼容性，只需要Chrome瀏覽器。div內的div高度

在這裏，問題的筆畫演示： http://jsbin.com/ubiniy/1

正如你所看到的，在底部的滾動條是不可見的。 92％的高度在某些維度上可見，但沒有其他維度。

在此先感謝。

來源

2012-12-20 Knight Lore

看起來工作罰款時，你把它放在一個jsFiddle：http://jsfiddle.net/FHRb4/ –

@RoryMcCrossan它似乎工作正常，但如果你改變首先「溢出：隱藏」到「溢出：自動」，你會看到以前隱藏（切斷）的部分。 – SaschaM78

表格水平很長，滾動條你看到它只是頁面的一個小溢出，而不是包含表格的div的滾動條。出於這個原因，我使用jsbin來全屏查看。 –

的問題是，它繼承父母的身高，你宣告但也有2點爲標題的div所以沒有空間，所有的，因爲它是在100％，它滾動:)

OK這裏的一種方法：

然而，它需要確保標題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 :)

請記住，這只是解決特定的問題，你可能會和了意外的行爲，所以我不建議任何方法就像在動態內容中確定高度並根據特定情況的情況一樣。

我的建議是看看其他人是如何解決這個問題，使網格或whaever沒有必要從頭找到熱水:)

來源

2012-12-20 16:44:37 kidwon

我傾向於認爲「100％」是「填充所有可用空間」，並且可能是這個問題。有一種方法可以告訴CSS「填補空間」？我需要在頂部動態添加div，標題不固定。 –

有「身高」，但你不知道剩下的是什麼100％。有幾種方法我會寫下來，但可能還有其他問題只是給我幾分鐘。 – kidwon

非常感謝。我知道有一種方法可以用jquery/js來解決，但我正在試圖讓瀏覽器進行數學計算，因爲應用程序需要很多包含多個數據的表格......而且我不相信沒有用css解決這個問題的方法！ :) –

只是刪除從.dlgrid的overflow:auto;也可以去除填充或者馬丁讓它靠邊。

或者，如果你不想從.dlgrid刪除overflow:auto;可以使上或許真的

<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

來源

2012-12-20 16:49:33

.dlgrid是「溢出：隱藏」，我需要保持它。 –

謝謝。我明白。這不是我正在尋找的解決方案，我試圖避免指定每個div的高度，因爲您指出這是錯誤。我正在尋找一個「填充剩餘空間」的解決方案，但也許它不存在。如果沒有其他答案出現，您的答案將是正確的答案... –

div內的div高度

回答

相關問題