我尝试过多个选项并将其缩小到特定类别,但我似乎无法弄明白。
我试图让“#content-wrapper”增加高度,但它似乎停留在浏览器的高度。
这让我在过去的3个小时里一直在惹恼我。
#content-wrapper {
width: 100%;
max-width: 1000px;
height: 100%;
min-height: 100%;
margin: auto;
position: relative;
}
JSFiddle Link:http://jsfiddle.net/8hn7uLqr/
如果有人能帮助我,我将非常感激,我希望每个人都有一个愉快的平安夜!
答案 0 :(得分:0)
删除height:100%
和#wrapper
的css中的#content-wrapper
。在这种情况下,它表示浏览器的高度而不滚动。给高度设置一些像素,或者让高度取决于height:auto
内的内容。
答案 1 :(得分:0)
因此,如果我理解正确,那么当您的内容实际位于703px
时,您不确定为什么内容会显示9000
的高度。这里有2个问题。
是height: 100%
的使用。许多人认为这意味着100%的内容,但它实际上是当前屏幕尺寸的100%,除非您将html
设置为height: 100%
。您可以使用min-height: 100%
,这将允许它超出屏幕高度。
您遇到的最大问题是由于position: absolute
的不断使用。我不确定您是否知道但使用absolute
定位会从文档流中删除元素。意味着它不再坚持它的父母约束。
我删除了多个position: absolute
和height: 100%
,您可以在下面的屏幕截图中看到高度调整为内容:
所以你真的需要很多CSS大修才能在没有absolute: position