如何让指定子Div超出父Div显示且父Div高度随其他子元素动态变化？

我来帮你搞定这个布局需求！你的核心诉求是：父容器高度完全由child-b的内容动态撑开，同时那个蓝色的.child元素要撑满父容器高度，并且通过左移实现视觉上超出父容器的效果。咱们调整一下代码就能实现：

核心思路 #

1. 让父容器建立块级格式化上下文，解决浮动子元素导致的高度塌陷问题，确保父容器高度由child-b的内容决定。
2. 用绝对定位来实现.child的超出显示，这样它不会干扰child-b的布局，同时能轻松撑满父容器高度。

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
  width: 80%;
  min-height: 50px;
  background: red;
  position: relative; /* 为绝对定位子元素提供参考 */
  display: flow-root; /* 清除浮动，确保父容器高度自适应 */
  /* 兼容旧浏览器可以替换成伪元素清除浮动：
  #parent::after {
    content: "";
    display: table;
    clear: both;
  }
  */
}

.child {
  width: 20%;
  height: 100%; /* 撑满父容器高度 */
  background: blue;
  position: absolute; /* 脱离文档流，不干扰其他子元素 */
  left: -5%; /* 向左超出父容器5% */
  top: 0; /* 对齐父容器顶部 */
}

.child-b {
  width: 40%;
  float: left;
  padding: 0 10px; /* 加个内边距让文本更美观，可选 */
  box-sizing: border-box; /* 确保内边距不增加宽度 */
}
</style>
</head>
<body>
<div id="parent">
 <div class="child"></div>
 <div class="child-b">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor sit amet purus nec venenatis. Integer maximus, nisi et pretium convallis, erat metus malesuada lorem, nec porttitor leo felis sollicitudin dolor.
 </div>
 <div class="child-b">
 Lorem ipsum.
 </div>
</div>
</body>
</html>

关键调整说明 #

• 父容器的position: relative：让绝对定位的.child元素能以父容器为基准进行定位。
• display: flow-root：这是现代浏览器清除浮动的最佳方案，能让父容器自动包裹所有浮动子元素，高度完全由child-b的内容撑开。如果需要兼容IE等旧浏览器，可以换成注释里的伪元素清除浮动写法。
• .child的绝对定位：脱离文档流后，它不会占据child-b的布局空间，两个child-b可以正常各占40%宽度填满父容器。height: 100%直接继承父容器的高度，left: -5%实现向左超出的视觉效果。
• box-sizing: border-box：给child-b加上这个属性，确保内边距不会额外增加宽度，避免布局错位。

这样调整后，父容器的高度会随着child-b的内容多少自动变化，蓝色的.child始终撑满父容器高度且向左超出，完全符合你的需求！

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