18

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

我在所有元素上使用 height auto 和 min-height:100% 但它不起作用。如果我删除 min-height 以仅包含 height: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/

4

1 回答 1

16

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

具有一min-height组元素的子元素100%不能通过百分比继承其父元素的高度...

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

CSS2.1 规格：

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

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

于 2013-07-31T11:31:53.083 回答