twitter-bootstrap CSS 高度工作但最小高度不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17969022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Height working but min-height doesn't work
提问by Ahmar Ali
I am having a strange rather weird problem. The problem is a small one that is I want to set min-height to 100% that is the content of the page should span whole screen of he user and if possible the page should extend down if content exceeds 100%. A simple way would be to set min-height:100% and to set height:auto that is exactly what I want but regardless of how many times I try it the problem remains there.
我有一个奇怪而奇怪的问题。问题是一个小问题，我想将 min-height 设置为 100%，即页面的内容应该跨越用户的整个屏幕，如果可能的话，如果内容超过 100%，页面应该向下延伸。一个简单的方法是设置 min-height:100% 并设置 height:auto 这正是我想要的，但无论我尝试多少次，问题仍然存在。
I am using height auto and min-height:100% on all the elements but it doesn't work. If I remove min-height to include only height:100% then it works like a charm but then when the content is larger it overflows whole footer.
我在所有元素上使用 height auto 和 min-height:100% 但它不起作用。如果我删除 min-height 以仅包含 height:100% 那么它就像一个魅力但是当内容较大时它会溢出整个页脚。
Please help me here is css:
请帮助我这里是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%;
}
Here is the page showing the problem : http://contestlancer.com/ai/GP/
这是显示问题的页面：http: //contestlancer.com/ai/GP/
采纳答案by Armel Larcier
Yes this is a pain but that's how it works. Height can be inherited from positioned parents but not when these have a min-heightproperty.
是的，这很痛苦，但这就是它的工作原理。高度可以从定位的父级继承，但当它们具有min-height属性时则不能。
Children of elements that have a min-heightset to 100%cannot inherit their parent's height via percentage...
具有min-height设置为的元素的子元素100%无法通过百分比继承其父元素的高度...
https://stackoverflow.com/a/8468131/1491212
https://stackoverflow.com/a/8468131/1491212
CSS2.1 specs :
CSS2.1 规格：
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
该百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 'auto'。
Use position: relative; height: 100%on containers to work around the problem, and add min-height: 100%;to the deepest child.
position: relative; height: 100%在容器上使用来解决问题，并添加min-height: 100%;到最深的孩子。
