html - 绝对/相对定位问题

Question

下面是我正在处理的代码。如您所见，有一个“#parent”div 和一个“#child”div。 '#child' div 有一个未定义的高度，这是因为有时，'#child' 的高度小于或长于它的父级高度，即如下所示的 '400px'。我遇到的问题是，只要 child 的高度比#parents 的高度长，#child 的内容就会重叠或超出 parent 的包裹范围。

<style>
  #parent{
    position: relative;
    height: 400px;
    width: 500px;
  }

  #child{
    position: absolute;
    top: 0px;
    right: 0px; 
  }
</style>

<div id="parent">
   <div id="child">
      //Some content
   </div>
</div>

Answer 1

如果您想隐藏 #child 上的任何溢出内容，请使用:

#parent {
  overflow: hidden;
}

如果您仍然希望能够看到#child 中的所有内容，您可以将其包含在滚动条中。这样#child的高度就不会和#parent的高度冲突了。

#parent {
  overflow: auto;
}

编辑:

如果想让#parent的高度随#child一起拉伸(stretch)，#child不能绝对定位。把它拿下来，它会起作用的。如果你希望高度至少为 400px，那么你可以使用:

#parent {
   min-height: 400px;
}

参见 fiddle :http://jsfiddle.net/VYrLh/