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

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>

那是一个很好的解决方案。只是边界必须落实到顶部和底部。让我的一天，谢谢 – mrzmyr 2012-03-19 22:48:41

答

您可以使用绝对定位，并同时指定顶部和底部位置。

答

，如果我失去了一些东西，但不知道是怎么的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

“条件：在底部的DIV应该留在窗口的底部” – mrzmyr 2012-03-19 22:54:13

@ M.Myer arghh，愚蠢的哑巴，没有读取整个事情：P – 2012-03-19 22:55:54

相关推荐