如何设置div宽度为兄弟元素的百分比？bar-grow需占header的80%

嘿，这个问题我之前也踩过坑！核心原因是CSS里的百分比宽度默认是相对于直接父元素计算的，而不是你想要的相邻header元素。下面给你两种靠谱的解决办法：

方法1：用JavaScript动态计算（不改动HTML结构） #

这种方法适合你不想调整现有DOM结构的情况，通过JS实时获取header的宽度，再给.bar-grow设置对应的80%宽度：

// 获取目标元素
const targetHeader = document.querySelector('header');
const barGrow = document.querySelector('.bar-grow');

// 定义设置宽度的函数
function updateBarWidth() {
  // 获取header的实际宽度（包含padding和border，若要纯内容宽度用clientWidth）
  const headerActualWidth = targetHeader.offsetWidth;
  // 设置.bar-grow为header宽度的80%
  barGrow.style.width = `${headerActualWidth * 0.8}px`;
}

// 页面加载时初始化一次
updateBarWidth();

// 监听窗口 resize 事件，确保窗口变化时宽度同步更新
window.addEventListener('resize', updateBarWidth);

方法2：调整HTML结构（更简单的CSS方案） #

如果允许修改HTML，把.bar-grow放到header标签内部，那直接用CSS就能轻松实现：

<header>
  <!-- 原有header内容 -->
  <div class="bar-grow"></div>
</header>

对应的CSS：

.bar-grow {
  width: 80%; /* 此时百分比会直接相对于父元素header计算 */
}

小提示： #

• 如果header的宽度会随窗口大小动态变化（比如响应式布局），方法1的resize监听能保证宽度实时同步；
• 若要排除header的padding和border影响，把代码里的offsetWidth换成clientWidth即可。

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