如何使div尺寸垂直向下？

我在圖片中出現了以下情況。灰色div是品紅色和藍色div的父項。洋紅div與內容垂直縮放。我想讓藍色div始終縮放到包含灰色div的底部。我搜索並嘗試了各種組合，但都是零效應。如何使div尺寸垂直向下？

alt text

編輯：問題解決了！容器需要溢出：隱藏，我想伸展到底部（藍色）的div需要padding-bottom：1000px; margin-bottom：-1000; （或更大，如果你需要的話）

來源

2009-06-30 Keyframe

如果你需要IE6以上的支持，答案是：你不能只用css。

有不同的解決方案，真正解決規模擴張的股利或只是看起來像：

可以使用背景圖片爲灰格（如果你需要的是舒展所有的背景一路下來）
您可以使用JavaScript來計算灰div的高度，並將其應用到藍格

有使用一個非常大的填充和一個同樣大的負面保證金CCS的選擇，但我不記得它是否適用於所有瀏覽器，我可以目前沒有找到該文章。

編輯：大填充/緣陰性的CSS解決方案：

文章在談論的Firefox 1.5和Safari瀏覽器2，所以我不知道，如果它仍然有效，但here it is。

來源

2009-06-30 19:10:00 jeroen

我記得該解決方案具有很大的負餘量 - 我以前曾經使用過這種解決方案，但對於上帝的愛我不記得確切的實施細節，也不能在網上找到它！ – Keyframe 2009-06-30 19:14:29

的JavaScript來做到這將是...

<div id="yourDiv" style="background-color: Blue; width: 150px;"> 
    Hello 
</div> 

<script type="text/javascript"> 
    var div = document.getElementById('yourDiv'); 

    div.style.height = document.body.clientHeight + 'px'; 
</script>

編輯：

檢查this鏈接，獲得在不同的瀏覽器clientHeight ...

來源

2009-06-30 19:14:03

謝謝，但JavaScript現在不是一個選項。 – Keyframe 2009-06-30 19:18:22

爲什麼不能選擇javascript的任何特定原因？如果你有jQuery可用，你可以做類似 var greydiv = $（「＃greydivselector」）。height（）; $（「＃bluedivselector」）。height（greydiv）; 你可以玩偏移。思考？ – Acorn 2009-06-30 19:40:12

我同意，爲什麼JavaScript不是一個選項？可能是一個更簡單的解決方案。 – 2009-06-30 20:33:57

裏面你的父母DIV的，如果你在你的藍色div上設置「float：right」，並以百分比（身高：100％;）來玩弄你的身高，我認爲你應該達到你所要求的。

由於藍色div是您的灰色div的孩子，您藍色div的最大高度不應超過您的父級div。除非我在這裏丟失了一些東西...

另外，如果你漂浮在右邊的藍色div，一定要把它放在你的標記中的洋紅div。

橡子

來源

2009-06-30 19:14:49 Acorn

不要忘記指定父母的高度，或浮動的項目不會'留在父' – MrChrister 2009-06-30 19:53:50

以我的經驗使藍色DIV 100％不工作的高度。唯一一次我想要這個是擁有藍色DIV的背景，爲了解決這個問題，你需要讓灰色DIV的背景包含其他DIV的藍色背景。

來源

2009-06-30 19:26:00 jrglasgow

aka人列 - 我試圖避免這一點，因爲在我目前的設置，我需要添加另一個div容器......如果沒有別的東西出現，我會這樣做。謝謝。 – Keyframe 2009-06-30 19:28:13

另一種方式在HTML對象設置高度100％是使用風格：

<html> 
<head> 
<style> 
    html, body { 
    height: 100%; 
} 

#mydiv { 
    height: 100%; 
    background-color:red; 
}   
</style> 
</head> 
<body> 
<div id="mydiv">aaa</div> 
</body> 
</html>

來源

2009-06-30 19:41:16 pedrofernandes

的關鍵是有父容器上的一組高度。然後，高度：100％工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Divs</title> 
<style type="text/css" media="all"> 
#main { 
    height:30em; 
    width:30em; 
    background-color:#999999; 
    padding:1em 1em 0px 1em; 
} 
.inner { 
    width:5em; 
} 
#blue { 
    float:right; 
    background-color:#0000FF; 
    height:100%; 
} 
#magenta { 
    float:left; 
    background-color:magenta; 
} 
</style> 
</head> 
<body> 
<div id="main"> 
    <div class="inner" id="blue"> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10 
    </div> 
    <div class="inner" id="magenta"> 
     1<br/>2<br/>3<br/>4<br/>5<br/>6 
    </div> 
</div> 
</body> 
</html>

來源

2009-06-30 19:45:21 MrChrister

我這通過設置父DIV工作（在Chrome反正）：

position: absolute;

和孩子的DIV：

height: 100%;

來源

2012-12-02 18:24:06 jLi

如何使div尺寸垂直向下？

回答

相關問題