動態DIV容器高度

我知道每個網絡開發者都討厭這個話題，但無論如何...我發現沒有好的解決方案爲此。動態DIV容器高度

我有3個的DIV，兩個靜態（灰色的）和一個動態（紅色）。該圖像描述整個窗口。如在聊天應用程序。

the div container

而且，沒錯，問題是：如何獲得紅色的動態窗口時得到調整大小（或其他佈局的變化）。有沒有一個soltuon 沒有javascript，只是CSS（3）？

編輯：條件：底部的DIV應該留在窗口的底部，對不起。

其他信息

我已經做到了在JS（jQuery的），但我認爲這是沒有很好的做法都沒有。（中間DIV的resize方法必須在每個「佈局改變事件」中實現）。

這裏舉例：

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 });

來源

2012-03-19 mrzmyr

http://jsfiddle.net它：$ – 2012-03-19 22:38:51

絕對定位，你可以這樣做：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>

來源

2012-03-19 22:38:31

那是一個很好的解決方案。只是邊界必須落實到頂部和底部。讓我的一天，謝謝 – mrzmyr 2012-03-19 22:48:41

您可以使用絕對定位，並同時指定頂部和底部位置。

來源

2012-03-19 22:27:59 javram

，如果我失去了一些東西，但不知道是怎麼的div，和所有塊級元素，自然的反應，你必須do是正確包含它們，並且不會將它們傳遞給一個固定的高度，因爲默認情況下它們具有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; 
}

Demo

來源

2012-03-19 22:51:22

「條件：在底部的DIV應該留在窗口的底部」 – mrzmyr 2012-03-19 22:54:13

@ M.Myer arghh，愚蠢的啞巴，沒有讀取整個事情：P – 2012-03-19 22:55:54

動態DIV容器高度

回答

相關問題