動態 DIV 容器高度
[英]Dynamic DIV Container Height
問題描述
我知道每個網絡開發人員都討厭這個話題，但無論如何......我沒有找到好的解決方案。
我有 3 個 DIV，兩個靜態（灰色）和一個動態（紅色）。 該圖像描述了整個窗口。 例如在聊天應用程序中。
而且，是的，問題是：當窗口調整大小（或其他布局更改）時，我如何獲得紅色動態。 有沒有沒有 javascript ，只有 CSS(3) 的解決方案？
編輯：條件：底部的 DIV 應該留在窗口的底部，抱歉。
附加信息
我已經在 JS (jQuery) 中完成了它，但我認為這根本不是一個好習慣。 （中間 DIV 的調整大小方法必須在每個“布局更改事件”中實現）。
這里的例子：
var div1 = $('#div1').outerHeight(true);
var div2 = $('#div2').outerHeight(true);
var div3Padding = $('#div3').outerHeight(true) - $('#div3').innerHeight();
$('#div3').css({ height: window.innerHeight - (div1 + div2) - div3Padding });
4 個解決方案
解決方案1
3 已采納 2012-03-19 22:38:31
使用絕對定位，你可以這樣做： http : //jsfiddle.net/rQVmK/
<html>
<style type="text/css">
#div1, div2, div3 { position: absolute; }
#div1 {
border: 3px solid #eee;
height: 30px;
top: 0; left: 0; right: 0;
}
#div2 {
border: 3px solid #e00;
top: 30px; bottom: 30px;
left: 0; right: 0;
}
#div3 {
border: 3px solid #eee;
height: 30px;
top: auto;
bottom: 0; left: 0; right: 0;
}
</style>
<div id="div1">Top</div>
<div id="div2">Middle</div>
<div id="div3">Bottom</div>
</html>
解決方案2
0 2020-07-29 16:54:11
解決方案3
0 2012-03-19 22:27:59
您可以使用絕對定位並指定頂部和底部位置。
解決方案4
0 2012-03-19 22:51:22
不知道我是否遺漏了一些東西，但這就是 div 和所有塊級元素如何自然地反應，你所要做的就是正確地包含它們而不是給它們一個固定的高度，因為它們默認具有height:auto . 試試這個設置，例如：
HTML
<div class="container">
<div class="header">
This is a header
</div>
<div class="content">
This is a content div
</div>
<div class="footer">
This is a footer
</div>
</div>
CSS
.container {
width:378px;
margin:0 auto;
padding:10px;
background-color:#fff;
border:1px solid #515151;
}
.header, .footer {
height:60px;
}
.header {
background-color:#00B4FF;
}
.footer {
background-color:#515151;
}
.content {
border:1px solid #000;
margin:10px 0;
padding:10px;
}
調整容器div的高度？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.