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

Question

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

我使用高度自动和最小高度:所有元素100%,但它不起作用.如果我删除最小高度只包括高度: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%不能通过百分比继承父元素的高度...

/sf/answers/592769201/

CSS2.1规范:

百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"auto".

使用position: relative; height: 100%容器来解决问题,并添加min-height: 100%;到最深的孩子.