相对定位容器内绝对定位Div高度被截断问题求助

首先咱们来捋清楚问题的根源：你用position: absolute把.top和.comm脱离了正常文档流，这就导致父元素.wrap完全感知不到这两个元素的高度——它的高度只能由浮动的.avatar撑起来。当评论内容超过头像高度时，自然就会被父元素的边界截断啦。

下面给你两个实用的解决方案，不用固定父元素高度就能完美解决这个问题：

方案一：使用Flexbox布局（首推） #

Flexbox是现代前端布局的首选方案，能轻松实现这种侧边头像+右侧内容的结构，完全不用依赖浮动或绝对定位，父元素还会自动根据内容高度自适应撑开。

修改后的CSS代码：

body { 
  background: #212121; 
  font-family: arial; 
} 
.main { 
  width: 80%; 
  margin: 20px auto; 
} 
.wrap { 
  width: 100%; 
  background: white; 
  padding: 10px;
  /* 改为flex布局，自动排列子元素 */
  display: flex;
  gap: 15px; /* 控制头像和内容的间距，替代margin-right */
  margin-bottom: 10px; /* 给每个评论块加底部间距，区分开 */
} 
a.avatar { 
  width: 45px; 
  height: 45px; 
  border-radius: 50%; 
  overflow: hidden; 
  flex-shrink: 0; /* 防止头像被内容挤压变形 */
} 
a.avatar img { 
  width: 100%; 
} 
.content-wrap {
  flex: 1; /* 让右侧内容区域占满剩余空间 */
}
.top { 
  display: flex;
  align-items: center; /* 让用户名和时间垂直居中对齐 */
  gap: 10px;
  margin-bottom: 5px; /* 和评论内容拉开一点距离 */
} 
a.name { 
  font-weight: bold; 
} 
.posted { 
  color: #BBB; 
  font-size: 12px; 
} 
p.comm { 
  margin: 0; /* 去掉默认margin，避免多余间距 */
}

对应的HTML只需要把.top和.comm放到一个新的容器里：

<div class="main"> 
  <div class="wrap"> 
    <a href="#" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /></a>
    <!-- 新增内容容器，统一管理右侧元素 -->
    <div class="content-wrap">
      <div class="top"> 
        <a href="#" class="name">John Doe</a> 
        <div class="posted">8 mins ago</div> 
      </div> 
      <p class="comm">Lorem ipsum dolor sit amet. </p>
    </div>
  </div> 
  <div class="wrap"> 
    <a href="#" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /></a>
    <div class="content-wrap">
      <div class="top"> 
        <a href="#" class="name">Jane Doe</a> 
        <div class="posted">11 mins ago</div> 
      </div> 
      <p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    </div>
  </div> 
  <div class="wrap"> 
    <a href="#" class="avatar"><img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" /></a>
    <div class="content-wrap">
      <div class="top"> 
        <a href="#" class="name">Jimmy Doe</a> 
        <div class="posted">18 mins ago</div> 
      </div> 
      <p class="comm">Ut enim ad minim veniam. </p>
    </div>
  </div> 
</div>

这个方案结构清晰，后期做响应式调整也更方便，完全不会出现内容截断的问题。

方案二：用浮动+Margin替代绝对定位 #

如果你暂时不想用Flexbox，也可以回到浮动的思路，给右侧内容区域设置margin-left避开头像位置，同时用overflow: hidden清除浮动，让父元素能被内容撑开：

修改后的CSS代码：

body { 
  background: #212121; 
  font-family: arial; 
} 
.main { 
  width: 80%; 
  margin: 20px auto; 
} 
.wrap { 
  width: 100%; 
  background: white; 
  padding: 10px;
  overflow: hidden; /* 清除浮动，让父元素根据内容撑开 */
  margin-bottom: 10px;
} 
a.avatar { 
  width: 45px; 
  height: 45px; 
  border-radius: 50%; 
  overflow: hidden; 
  float: left; 
  margin-right: 15px; 
} 
a.avatar img { 
  width: 100%; 
} 
.top { 
  overflow: hidden; /* 避免和浮动的头像重叠 */
  margin-bottom: 5px;
} 
a.name { 
  font-weight: bold; 
  margin-right: 10px; 
  float: left; 
} 
.posted { 
  color: #BBB; 
  font-size: 12px; 
  padding-top: 3px; 
  float: left; 
} 
p.comm { 
  overflow: hidden; /* 让评论内容避开头像区域 */
  margin: 0;
}

这个方案不用修改HTML结构，直接用浮动和清除浮动就能解决问题，但Flexbox在现代浏览器里兼容性已经非常好，还是更推荐第一种方案哦。

内容的提问来源于stack exchange，提问作者spice