css - 100% 使用 CSS

Question

考虑这个 jsfiddle 示例。

我需要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，它会#content根据高度#box和上面段落的高度和边距自动调整高度。

$(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%;