CSS Height 工作，但 min-height 不起作用

Question

我遇到了一个奇怪而奇怪的问题。问题是一个小问题，我想将 min-height 设置为 100%，即页面的内容应该跨越用户的整个屏幕，如果可能的话，如果内容超过 100%，页面应该向下延伸。一个简单的方法是设置 min-height:100% 并设置 height:auto 这正是我想要的，但无论我尝试多少次，问题仍然存在。

我在所有元素上都使用了 height auto 和 min-height:100% 但它不起作用。如果我删除 min-height 以仅包含 height:100% 那么它就像一个魅力但是当内容更大时它会溢出整个页脚。

请帮我这里是css：

html, body, container, row, col-lg-3, col-lg-9 {
     min-height: 100%;
     height: auto !important;
     height: 100%;
 }
 .container {
     max-width: 1170px;
     min-height: 100%;
     height: auto !important;
     height: 100%;
 }
 .col-lg-3 {
     min-height:100%;
     height:100%;
 }
 .col-lg-9 {
     min-height: 100%;
     height: 100%;
 }

这是显示问题的页面： http://contestlancer.com/ai/GP/

Answer 1

是的，这很痛苦，但它就是这样工作的。高度可以从定位的父级继承，但当它们具有min-height 属性时则不能。

将min-height 设置为100% 的元素的子元素不能通过百分比继承其父元素的高度...

https://stackoverflow.com/a/8468131/1491212

CSS2.1 规范：

百分比是相对于高度计算的 生成框的包含块。如果包含的高度 块没有明确指定（即，它取决于内容 高度），并且这个元素不是绝对定位的，值 计算为“自动”。

在容器上使用position: relative; height: 100% 来解决该问题，并将min-height: 100%; 添加到最深的子级。