CSS - 自动设置容器的高度？

Question

每隔一段时间我就会发现自己遇到这个问题并且我从来没有能够解决它！

有什么办法可以自动设定容器的高度吗？

以下是一个例子的小提琴： http://jsfiddle.net/2x78tcbn/

height: auto;在这种情况下不起作用。

正如我所说，宽度保持不变，但我的高度经常变化，这就是为什么我把它留下来 - 页面按预期加载 - 除了容器高度。

我的问题是，无论何时在容器下方添加任何内容，它都会向上移动并且不会按预期呈现。

可在此处看到： http://jsfiddle.net/2x78tcbn/1/

有没有人可能有这个解决方案，因为它已经困扰了我很长一段时间了！

真的很感激，

谢谢！

Answer 1

那是因为你需要清除浮动。根据定义，浮动元素从文档流中取出，因此导致包含父级的高度崩溃。一个简单的技巧是使用overflow: hidden：

#container {
    width: 600px;
    margin: 0 auto;
    overflow: hidden;
}

请参阅此处的小提琴：http://jsfiddle.net/teddyrised/2x78tcbn/2/

但是，如果隐藏溢出的内容不是您想要的行为，您可能需要查看其他clearfix解决方案：http://nicolasgallagher.com/micro-clearfix-hack/

更好：如果跨浏览器兼容性不是您的主要优先级，您可能需要考虑使用最新的CSS3 flexbox规范:) http://jsfiddle.net/teddyrised/2x78tcbn/3/

Answer 2

尝试使用jquery和windows size

设置高度运行时

$('#mainBanner').height($(window).height()-100);
alert($(window).height());