CSS高度工作，但最小高度不工作 [英] CSS Height working but min-height doesn't work

问题描述

我有一个奇怪的怪异的问题。问题是一个小的，我想设置最小高度为100％，这是页面的内容应该跨越整个屏幕的用户，如果可能的话，页面应该向下延伸，如果内容超过100％。一个简单的方法是设置最小高度：100％和设置高度：自动，这是我想要的，但无论我尝试多少次，问题仍然存在。

我使用height auto和min-height：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/

解决方案

是的，这是一个痛苦，但这是它的工作原理。 Height可以从定位的父项继承，但不能在这些具有 min-height 属性的情况下继承。

有 min-height 设置为 100％不能通过百分比继承父级的高度...

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

CSS2.1规格：

百分比是相对于
生成框的包含块。如果未明确指定包含
块的高度（即，它取决于内容
height），并且此元素不是绝对定位的，值
计算为'auto'。 / p>

使用 position：relative;高度：100％; 到容器上，以解决问题，并向最深的孩子添加 min-height：100％;

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.

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.

Please help me here is 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/

解决方案

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-height property.

Children of elements that have a min-height set to 100% cannot inherit their parent's height via percentage...

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

CSS2.1 specs :

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'.

Use position: relative; height: 100% on containers to work around the problem, and add min-height: 100%; to the deepest child.

这篇关于CSS高度工作，但最小高度不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！