我有一个高度为100％的包装div，其中包含几个div，其中包括页眉，内容和页脚div。我希望这3个div始终覆盖100％的高度，而页眉和页脚具有静态高度。例如，我希望内容div覆盖100％-页脚+页眉的高度。我似乎找不到解决方案。有任何想法吗 ？
CSS的高度可能很有趣。除非父容器具有定义的高度，否则百分比将无济于事。幸运的是，这通常很容易解决。在大多数情况下，如果将html，body和包装器设置为height: 100%;（以及包装器可能嵌套的其他所有内容），则可以使用calc()CSS3中的函数。支持的calc()IS（大部分）相当不错。
这是一个简单的例子。
主要的魔术发生在.content CSS规则中：
.content {
height: calc(100% - 50px - 50px); // 100% - height of header - height of footer
}
这非常接近所谓的“粘性页脚” （示例）。唯一的区别是，不是将height: 100%您min-height: 100%用于html，body和.wrapper。这样一来，页脚将始终保留在页面底部（而不是屏幕）。如果没有足够的内容将其推到底部，它仍然位于此处。而如果内容超出了屏幕上的显示范围，那么它只会不断地被向下推，直到没有剩余的内容为止。这是我最喜欢的CSS代码位之一。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句