可能自動高度子div？（不是父項的100％）

是否可以簡單地將子div自動調高到其父母的其他組件未使用的剩餘高度？對於下面的例子，.body只會像20px一樣高，因爲它僅僅爲內部html使用了那麼多。 .body能否自動消耗.parent的未使用高度？例如.parent 200px - .head 30px - .foot 30px = .body 120px？可能自動高度子div？（不是父項的100％）

下面的示例將顯示比使用空間高得多的.parent黃色框。如果將.body設置爲「height：100％」，它將使用父級的高度，而不是尊重.head或.foot元素。

<html> 
<head> 
<style type="text/css"> 
.parent { 
    width: 200px; 
    height: 200px; 
    background-color: yellow; 
} 

.head { height: 30px; background-color: blue; } 

.body { background-color: #999; } 

.foot { height: 30px; background-color: green; } 

</style> 
</head> 
<body> 
<div class="parent"> 
    <div class="head">I'm the head</div> 
    <div class="body">I'm the body</div> 
    <div class="foot">I'm the foot</div> 
</div> 
</body> 
</html>

這只是一個例子。在我的項目中，.parent高度只能在.parent元素中合理設置。此外，.parent高度基本上由後端代碼動態設置。三個內部div組織是因爲身體是可摺疊的，我的頭部和腳部有圓角。

任何建議，非常感謝！

來源

2012-03-26 garlicman

是我做的。身體需要隨着父母的身高而縮放。家長將被分配一個會照顧身高的班級。 – garlicman 2012-03-26 19:59:31

這可以很容易地實現負邊距！

集.body〜100％的高度
假設的.head和.foot高度是已知的，則可以添加等於.head和.foot相應高度的負頂部+底部邊緣。
由於源排序，.body將「覆蓋」.head。要解決此問題，請將position: relative添加到.head。
身體內部的內容需要稍微向下移動。你不能直接添加填充到.body。更好的是，在.body的內部再加上一次潛水，並將襯墊頂部+底部設置爲所需的高度。

Demo here

變體上面的例子中的：

設置.body〜100％的高度
假設的.head和.foot高度是已知的，則可以添加一負底部邊緣等於.head和.foot的高度之和。
由於.body將嘗試向父級外部流動，因此將overflow: hidden添加到父級。

Demo here

來源

2012-03-26 18:01:02

負邊距唯一的問題是它不會影響邊框。如果您將邊框添加到100％高度+負邊距的div，則最終的高度就是您所期望的高度，但是邊框會繼續保持父項的整個高度。在演示中，邊緣頂部使身體在頭部後方彈出。（正文文本在頭後）它應該是margin-bottom：-30px。（也許這是一個瀏覽器差異） – garlicman 2012-03-26 19:28:57

如果您將一個2px頂部+底部邊框添加到100％高的元素，它的_occupies_的高度爲100％+ 4px。您可能需要在邊距中包含邊框尺寸。至於第二個問題，請看註釋＃4;或者圍繞這個問題的第二個演示。 – 2012-03-26 19:46:10

無法及時編輯我的評論。它在演示中不起作用，因爲身體頂部30px隱藏在標題後面。 margin-top：-30px;正在剪輯頂部。如果您切換到頁邊空白處：-60像素，高度是正確的，但您會注意到顯示的背景不會停在父母的高度。例如它太長了30px。即使.body溢出：隱藏;負邊界不被尊重，背景顏色仍然顯示：http://jsfiddle.net/SRXqC/2/ – garlicman 2012-03-26 19:54:08

目前有兩種方法可以實現這一點。兩者都有些不盡人意。

首先是通過JS使用DOM信息計算剩餘高度。

第二個被稱爲CSS3 flexbox，完美的工作，但是是一個不成熟的規格，目前很少support。

不幸的是，這不能使用CSS 2.1來完成，這就是爲什麼CSS糟糕的原因之一。

來源

2012-03-26 17:49:33

約定，有趣的是，flexbox提供常見CSS問題的解決方案的頻率有多高，但其支持程度如何。 – mikevoermans 2012-03-26 17:51:54

@mikevoermans這是一個複雜的規範，從Mozilla的XUL靈活框演變而來。 Mozilla和Webkit都正在積極研究他們各自的規範更新版本的實現，其他人可能也是如此。 – 2012-03-26 17:59:06

對不起，我應該提到我想避免使用JS，但我認爲我們已經承認這是一種醜陋的方法。 – garlicman 2012-03-26 19:53:32

可能自動高度子div？ （不是父項的100％）

回答

相關問題

可能自動高度子div？（不是父項的100％）