CSS使用100%

Question

以this jsfiddle example为例。

我需要content始终伸展以满足它的父容器的底部(可以是任何高度)。从本质上讲，我希望它看起来像这样：

​

​

Answer 1

这有帮助吗？：http://jsfiddle.net/Boroso/8rXnL/编辑:对不起，原始链接是错误的。

将容器的高度更改为自动将允许更改内容的高度。我想这就是你要问的。

#box {
    width:300px;
    height:auto;    
    border:1px solid;
}

div.content {
    width: auto;
    height: 300px;
    background:#333;
    margin: 10px;
}

此外，您不应该添加填充到容器，因为这将改变它的高度和宽度，您可能想要的。正因为如此，我将div.content设置为在所有边上使用10px的边距。

Answer 2

我认为这在纯CSS中是不可能的，如果框的高度和之前的内容在高度上发生变化。我已经编写了一个小的Javascript，它可以根据#box的高度和上面段落的高度和页边距自动调整#content高度。

$(document).ready(function() {
  var p = $('#box > p:first-child');
  var margin_top = p.css('margin-top').substring(0,p.css('margin-top').length-2);
  var margin_bot = p.css('margin-bottom').substring(0,p.css('margin-bottom').length-2);
  var box_height = $('#box').css('height').substring(0, $('#box').css('height').length-2);
  var p_height = p.css('height').substring(0,p.css('height').length-2);
  var content_height = box_height - p_height - margin_top - margin_bot;
  $('#content').css('height', content_height+'px');
});

JSFiddle链接：http://jsfiddle.net/ueeMW/

Answer 3

为什么不使用更小的高度呢？

如下所示：

height: 85%;