CSS类不会获得高度

Question

我尝试过多个选项并将其缩小到特定类别，但我似乎无法弄明白。

我试图让“＃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/

如果有人能帮助我，我将非常感激，我希望每个人都有一个愉快的平安夜！

Answer 1

删除height:100%和#wrapper的css中的#content-wrapper。在这种情况下，它表示浏览器的高度而不滚动。给高度设置一些像素，或者让高度取决于height:auto内的内容。

Answer 2

因此，如果我理解正确，那么当您的内容实际位于703px时，您不确定为什么内容会显示9000的高度。这里有2个问题。

1. 是height: 100%的使用。许多人认为这意味着100％的内容，但它实际上是当前屏幕尺寸的100％，除非您将html设置为height: 100%。您可以使用min-height: 100%，这将允许它超出屏幕高度。

2. 您遇到的最大问题是由于position: absolute的不断使用。我不确定您是否知道但使用absolute定位会从文档流中删除元素。意味着它不再坚持它的父母约束。

我删除了多个position: absolute和height: 100%，您可以在下面的屏幕截图中看到高度调整为内容：



所以你真的需要很多CSS大修才能在没有absolute: position

的情况下进行设置