用CSS自動調整div高

假設有六個div在另一個上。用CSS自動調整div高

第一，第二和第三div具有固定的高度，例如25px，100px和25px。 4th div是內容區域，應該是一個自動調整div。 5th div有一些內容，最小高度是100px（高度不固定）。第六個div是頁腳有一個固定的高度，例如25像素。

第5和第6的div應該總是在頁面（不發粘）

有沒有問題，當第4格（div_auto_height）有很多的內容和頁面是一樣長或更長的底部比屏幕。

當頁面比屏幕短並且空格在第6個div之後時，會出現問題。那麼第五和第六個div並不是他們應該在的地方。

This is the normal case

的問題將得到解決，如果可以拿到4格（div_auto_height）自動調整，以填補空空間的高度。

This is what we need to have

我一直在試圖解決在許多方面這個問題沒有一個體面的解決辦法。

不工作的解決方案：

有不同的屏幕分辨率，所以最小高度未未做的頁面很長的小型或寬屏工作大屏幕的。
我一直沒能得到頂部和底部的定位屬性正常工作，因爲它使div的5,6來上4格（div_auto_height）

這是給你修改模板的頂部：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head><title>No title</title> 
<style type="text/css"> 

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    margin: 0; 
} 

#div1 { 
    height: 25px; 
    background-color: #123456; 
} 

#div2 { 
    height: 100px; 
    background-color: #345678; 
} 

#div3 { 
    height: 25px; 
    background-color: #567890; 
} 

#div_auto_height { 
    height: auto ; 
    background-color: #789012; 
} 

#div5 { 
    min-height: 100px; 
    background-color: #9; 
} 

#div6 { 
    height: 25px; 
    background-color: #123456; 
} 

</style> 
</head> 
<body> 
    <div id="div1">Div 1</div> 
    <div id="div2">Div 2</div> 
    <div id="div3">Div 3</div> 
    <div id="div_auto_height">This div should adjust automatically</div> 
    <div id="div5">Div 5</div> 
    <div id="div6">Div 6</div> 
</body> 
</html> 
</body> 
</html>

來源

2012-01-09 Johnny

** **報價：_ 「...... 6個div的一個在另一個」 _。那有什麼意思？也許你可以提供你想要做的事情的照片。 – Sparky 2012-01-09 22:06:55

爲什麼你不能提供'div_auto_height'的高度？我發現你的問題不夠清楚。 – Sandeep 2012-01-09 23:31:58

我正在解決表格的問題，所以它會盡可能通用... – Johnny 2012-01-12 07:42:16

有沒有CSS方法給屬性值「總屏幕高度 - 一些固定的像素」。使用Javascript。

來源

2012-01-10 08:06:23

這就是我正在考慮的，沒有純粹的CSS解決方案... – Johnny 2012-01-10 08:44:54

或者你可以通過使用模擬一個表'display：table'等，並給整個事物100％的高度。但是，所有六行將獲得相同數量的額外垂直填充。 – 2012-01-10 10:31:03

我相信你應該使用javascript來解決這個問題。有很多簡單易用的javascript框架，比如jquery。

你應該做的：

給一個id你的div。
使用這些ID找到你的div - 除了第四 - 並計算它們的高度
得到窗口
通過從其他div的高度

就是這樣！告訴我你是否需要一些代碼。

編輯：我沒有找到代碼，但我記得我用過jquery dimensions。你可以在這裏找到示例代碼！

來源

2012-01-10 08:12:58

這當然可以解決問題。它也可以通過使用表格輕鬆解決。我只是想知道是否有一個純粹的CSS解決方案來做這件事。如果您的文件中已經有javascript代碼，我非常感謝您從中獲得它。已經謝謝你了！ – Johnny 2012-01-10 08:39:44

這可能不是你最可行的解決方案，但如果你知道的第五和第六DIV一個max-height，你可以使用position: absolute和padding（設置爲max-height值）來實現你的結果：

<div id="wrapper"> 
    <div class="div-25"></div> 
    <div class="div-100"></div> 
    <div class="div-25"></div> 
    <div id="content"> 
     <div class="fluid"> 

     </div> 
    </div> 
</div> 
<div id="container"> 
    <div class="footer"> 
     <div class="div-25"></div> 
    </div> 
</div>

CSS：

html, body { 
    margin: 0; 
    height: 100%; } 
div { width: 100%; } 
#wrapper { min-height: 100%; } 
.div-25 { 
    background: green; 
    height: 25px; } 
.div-100 { 
    background: grey; 
    height: 50px; } 
#content { padding: 0 0 150px; } /* Max Height */ 
.fluid { 
    background: red; 
    height: 100px; } 
#container { position: relative; } 
.footer { 
    background: blue; 
    position: absolute; 
    bottom: 100%; 
    min-height: 100px; }

前瞻：http://jsfiddle.net/Wexcode/jzdDU/

來源

2012-01-10 17:36:47 Wex

嘿！這可能對我有用......感謝隊友！ – Johnny 2012-01-10 19:52:19

當然。請接受這個答案，如果你覺得它解決了你的問題:) – Wex 2012-01-10 22:31:02

這是接近，但仍然不是那裏...這種解決方案是相當脆弱的，如果第5 div的內容有一定的高度。 – Johnny 2012-01-11 07:46:47

變化

#div_auto_height { 
    height: auto ; 
    background-color: #789012; 
}

到

#div_auto_height { 
    height: 100% ; 
    background-color: #789012; 
}

或者也許你需要這樣的：

#div_auto_height { 
    height: calc(100% - 275px); ; 
    background-color: #789012; 
}

來源

2014-05-30 02:12:54 crazyjune

用CSS自動調整div高

回答

相關問題