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

前端之家收集整理的这篇文章主要介绍了html – CSS高度工作但最小高度不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个奇怪而奇怪的问题.问题是一个小问题,我想将最小高度设置为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/

解决方法

是的,这是一种痛苦,但它是如何工作的.高度可以从定位的父项继承,但不能在具有最小高度属性时继承.

最小高度设置为100%的元素的子元素不能通过百分比继承其父级的高度…

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

CSS2.1规范:

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

使用位置:相对;高度:容器上100%解决问题,并添加最小高度:100%;对最深的孩子.

猜你在找的HTML相关文章