Question

以下是我正在处理的代码。如您所见，有一个'＃parent'div和一个'#child'div。 '#child'div有一个未定义的高度，这是因为有时候，'#child'的高度比它的父高度更小或更长，如下所示为'400px'。我得到的问题是，每当孩子的身高超过#parents身高时，＃孩子的内容就会重叠或传递到父母的身边。

<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

尝试添加

overflow: auto;

到#parent风格。

Answer 2

如果您希望隐藏#child上的任何溢出内容，请使用：

#parent {
  overflow: hidden;
}

如果您仍希望能够查看#child中的所有内容，则可以将其包含在滚动条中。然后，#child的高度不会与#parent的高度发生冲突。

#parent {
  overflow: auto;
}

修改

如果您希望#parent的身高与#child一致，#child无法绝对定位。把它取下来，它会起作用。如果你想要高度至少为400px，那么你可以使用：

#parent { min-height: 400px; }

请参阅小提琴：http://jsfiddle.net/VYrLh/

Answer 3

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

即可

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

绝对/相对定位问题

3 个答案: