CSS高度有效，但最小高度不起作用。

Question

我遇到一个相当奇怪的问题。这个问题很小，就是我想将min-height设置为100%，也就是页面内容应该占据整个屏幕，如果可能的话，页面应该在内容超过100%时扩展下去。简单的方法是设置min-height:100%，并将height:auto设置为所需，但无论我尝试多少次，问题仍然存在。

我在所有元素上都使用了height auto和min-height:100%，但它不起作用。如果我只包含height:100%而删除min-height，则它可以完美地工作，但是当内容更多时，它会溢出整个页脚。

请帮帮我，这是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/

- Ahmar Ali

---

你能展示一下你的HTML吗？ - Guruprasad J Rao

@Kaushik 我正在使用 Twitter Bootstrap 中的列，我已经在帖子中发布了链接。在这里放置代码会占用太多空间，请看一下链接。 - Ahmar Ali

你说如果去掉min-height，只设置height就可以解决问题，但是会导致底部溢出，对吧？为什么不尝试给底部添加z-index，这样它就始终在最上层了。你试过了吗？ - Guruprasad J Rao

@Kaushik 即使它保持在顶部，它也会重叠其他内容，不想以这种方式做。 - Ahmar Ali

好的，你尝试过设置CSS overflow属性吗？这样，无论div中出现多少额外内容，都会在带有滚动条的div内显示。 - Guruprasad J Rao

Answer 1

是的，这很麻烦，但这就是它的工作原理。高度可以从定位父元素继承，但如果这些父元素具有min-height属性，则不能继承。

如果元素的父元素设置了min-height为100％，则子元素无法通过百分比继承其父元素的高度...

https://dev59.com/a2oy5IYBdhLWcg3wkO0K#8468131

CSS2.1规范：

百分比相对于生成框所在块的高度计算。如果未明确指定包含块的高度（即取决于内容高度），且该元素未被绝对定位，则该值计算为“auto”。

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

- Armel Larcier

---

谢谢您的回答，但我不太明白您的意思。所以我会保留CSS不变，但是对每个容器添加相对位置？ - Ahmar Ali

那不行，兄弟...位置对div没有影响。 - Guruprasad J Rao

@AhmarAli 是的，那是我的意思，但是我没有现成的答案给你...... 我通常会在最深层的子元素上设置min-height: 100%，并在容器上设置height: 100%; position: relative; - Armel Larcier