CSS使用100%

考虑一下

我需要

内容

始终拉伸以满足其父容器的底部（可以是任何高度）。基本上我希望它看起来像这样：

---

为什么不降低高度

像这样：

height: 85%;

这有帮助吗？：编辑：对不起，原始链接错误

将容器高度更改为“自动”将允许 内容高度的变化。我猜你也是这样 你在问

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

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

另外，您不应该向容器中添加填充，因为这会改变

---

你可能想要的高度和宽度。因此，我将div.content设置为在所有边上使用10px的边距。

如果框的高度和之前的内容高度不同，我认为在纯CSS中是不可能的。我编写了一个小Javascript，它根据

#框

的高度以及上面段落的高度和边距自动调整

#内容

的高度

$(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');
});

---

jsiddle link:

这不是它在做什么吗？如果不在某个地方设置“静态”高度，你就不能这样做，除非你使用javascript。@Rice_Crisp我正在chrome浏览器中查看这个示例，它看起来与我附加的图像一模一样。@veelen我很害怕。我知道如何在javascript中实现这一点，但我正在尝试找到一个css技巧来完成同样的事情。哦，投票赞成从技术上完美地回答这个问题，但不幸的是，

height:auto

导致我真正的项目的

overflow:scroll

无法工作。如果我没有弄错的话，只需设置一个

最大高度

和

溢出：滚动