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

问题描述

我遇到了一个奇怪而奇怪的问题.问题是一个小问题，我想将 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)，并且这个元素不是绝对定位的，值计算为自动".

使用位置:相对；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 高度工作但最小高度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！