CSS类不会获得高度

时间:2014-12-25 01:48:52

标签: html css

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

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

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

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

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

  3. 我删除了多个position: absoluteheight: 100%,您可以在下面的屏幕截图中看到高度调整为内容:

    enter image description here

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

    的情况下进行设置