使用CSS自動調整div高度
[英]Auto adjust div height with CSS
問題描述
假設另一個有六個div。
第1，第2和第3 div具有固定高度，例如25px，100px和25px。 第4個div是內容區域，應該是自動調整div。 第5個div有一些內容，最小高度為100px（高度不固定）。 第6個div是一個具有固定高度的頁腳，例如25px。
第5和第6個div應始終位於頁面底部（不粘）
當第4個div（div_auto_height）包含大量內容並且頁面與屏幕一樣長或更長時，沒有問題。
當頁面比屏幕短並且第6個div之后出現空白空間時，會出現問題。 然后第5和第6分區不是他們應該的位置。
如果可以自動調整第4個div（div_auto_height）的高度以填充空白區域，則問題將得到解決。
如果沒有一個像樣的解決方案，我一直試圖以多種方式解決這個問題。
不工作解決方案：
- 有不同的屏幕分辨率，因此最小高度不適用於大屏幕而不會使頁面對於小屏幕或寬屏幕而言非常長。
- 我無法使頂部和底部定位屬性正常工作，因為它使得div 5和6成為第4個div的頂部（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: #901234;
}
#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>
4 個解決方案
解決方案1
3 2012-01-10 08:12:58
我相信你應該用javascript來解決這個問題。 有很多易於使用的javascript框架，比如jquery。
你應該做什么：
- 給你的div一個id。
- 使用這些id找到你的div - 除了第四個 - 並計算它們的高度
- 獲得窗口的高度
- 通過從其他div高度的總和中減去窗口高度來設置第4個div的高度
就這樣！ 如果您需要一些代碼，請告訴我。
編輯：我沒有找到代碼，但我記得我使用了jquery維度 。 你可以在那里找到示例代碼！
解決方案2
2 已采納 2012-01-10 08:06:23
沒有CSS方法為屬性賦予值“總屏幕高度 - 一些固定像素”。 使用Javascript。
解決方案3
0 2014-05-30 02:12:54
更改
#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;
}
解決方案4
0 2012-01-10 17:36:47
這可能不是最適合您的解決方案，但如果您知道第5和第6個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; }
div CSS自動調整高度以適應內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.