如何使用CSS在文档流中将元素上移自身高度的指定百分比

现有CSS规则限制说明 #

你遇到的问题属于CSS规范的明确设定：

• 百分比形式的margin/padding永远相对于包含块的宽度计算，无法直接对应元素自身高度
• transform、相对定位的偏移都属于视觉偏移，不会改变元素在文档流中实际占用的空间
• 百分比形式的top/bottom属性，在包含块高度为auto（由内容撑开）时会被判定为无效，默认按0处理

可行实现方案 #

方案1：全兼容JS辅助方案（推荐）

仅需要添加极少量JS适配动态高度，兼容所有现代浏览器，不需要改动原有布局结构：

#top {
  background: lightGreen;
}

#content {
  outline: 1px solid red;
  /* 相对于自身高度上移30% */
  transform: translateY(-30%);
  /* 用CSS变量设置负margin，抵消上移后下方残留的空白 */
  margin-bottom: calc(-0.3 * var(--content-height, 0px));
}

#bottom {
  background: lightBlue;
}

const content = document.querySelector('#content');
const setContentHeight = () => {
  // 动态获取content自身高度，写入CSS变量
  content.style.setProperty('--content-height', `${content.offsetHeight}px`);
};
// 页面加载时初始化
setContentHeight();
// 窗口尺寸变化时重新计算，适配响应式场景
window.addEventListener('resize', setContentHeight);

方案2：纯CSS实验性方案

如果你的使用场景可以兼容Chrome 105+、Firefox 110+、Safari 16+及以上版本浏览器，可以用容器查询单位实现纯CSS方案，不需要JS：
首先给#content套一层外层容器：

<div id="top">Top</div>
<!-- 新增外层容器 -->
<div class="content-wrapper">
  <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div id="bottom">Bottom</div>

对应CSS：

#top {
  background: lightGreen;
}

.content-wrapper {
  /* 声明为尺寸容器，高度由内部content元素撑开 */
  container-type: size;
  width: 100%;
}

#content {
  outline: 1px solid red;
  transform: translateY(-30%);
  /* cqh为容器查询高度单位，1cqh等于外层容器高度的1% */
  margin-bottom: -30cqh;
}

#bottom {
  background: lightBlue;
}

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