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

问题描述

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

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.

我在所有元素上使用 height auto 和 min-height:100% 但它不起作用.如果我删除 min-height 以仅包含 height:100% 那么它就像一个魅力但是当内容较大时它会溢出整个页脚.

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.

请帮助我这里是css:

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%;
 }

这是显示问题的页面:http://contestlancer.com/ai/GP/

推荐答案

是的，这很痛苦，但这就是它的工作原理.高度可以从定位的父级继承，但当它们具有 min-height 属性时不能继承.

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.

min-height 设置为 100% 的元素的子元素不能通过百分比继承其父元素的高度...

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

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

CSS2.1 规范:

百分比是相对于高度计算的生成框的包含块.如果包含的高度块没有明确指定(即，它取决于内容height)，并且这个元素不是绝对定位的，值计算为自动".

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

使用<代码>位置:相对；height: 100% 在容器上解决这个问题，并将 min-height: 100%; 添加到最深的孩子.

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

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