Question

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

我在所有元素上使用高度自动和最小高度：100％，但它不起作用。如果我删除min-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%;添加到最深的孩子。

CSS高度工作但最小高度不起作用

1 个答案: