绝对/相对定位问题

Question

下面是我正在处理的代码。正如你所看到的，有一个‘#家长’div和'#child‘div。“#child”div有一个未定义的高度，这是因为有时，“#child”的高度小于或大于父级的“400 of”，如下所示。我遇到的问题是，每当孩子的身高比父母的身高长，孩子的内容就会重叠或传递到父母的包外。

<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一起伸展，#child就不能绝对定位。把它取下来，它就会工作。如果您希望高度至少达到400 at，那么您可以使用：

#parent {
   min-height: 400px;
}

见小提琴：http://jsfiddle.net/VYrLh/

Answer 2

试着添加

overflow: auto;

以#家长的风格。

Answer 3

绝对定位元素不遵循任何它的父CSS规则。只需在子选择器中添加以下内容

  #child{
    position: absolute;
    top: 0px;
    right: 0px;
    max-height: 400px;
    overflow-y: auto;
  }