如何设置父div的子sidebar宽度为100%并与父div同宽

我采用如下网格布局构建页面，Div3作为页面内容区域，响应式表现正常。但左侧Div2内的侧边栏存在问题：需要让sidebar宽度与Div2完全一致，该sidebar通过Web Components引入，相关代码如下：

index 代码 #

<div id="div2">
  <aside>
    <sidebar></sidebar>
  </aside>
</div>

sidebar.html 代码 #

<div class="menu-btn">
  <i class="fas fa-bars vertical"></i>
</div>
<div class="side-bar">
  <section>
    <div class="close-btn">
      <i class="fas fa-times vertical"></i>
    </div>
    <div class="logo">
      <a href="https://priklady.doucovanispetrem.cz/">
        <img
          src="#"
          alt="Logo" />
      </a>
    </div>
    <h1>Doučování</h1>
    <div class="menu">
      <div class="item">
        <a class="sub-btn">
          Matice
          <i class="fas fa-angle-right dropdown"></i>
        </a>
        <div class="sub-menu">
          <a
            href="/pages/matice/zakladni-operace.html"
            id="matice/zakladni-operace"
            onClick="reply_click(this.id)"
            class="sub-item">
            Základní operace
          </a>
          ......
        </div>
      </div>
    </div>
  </section>
</div>

Sidebar CSS 代码 #

.side-bar {
  background: #1b1a1b;
  backdrop-filter: blur(15px);
  width: 14.6%;
  min-width: 165px;
  max-width: 250px;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 50;
  // left: 0px;
  overflow-y: auto;
  transition: 0.6s ease;
  transition-property: left;
}

Grid CSS 代码 #

#grid {
  display: grid;
  grid-template-rows: 35.3% 1fr;
  grid-template-columns: 16% 75.5% 8.5%;
  gap: 0;
  width: 100vw;
  height: 100vh;
}

#div1 {
  grid-area: 1 / 2 / 2 / 4;
}
#div2 {
  grid-area: 1 / 1 / 3 / 2;
}

#div3 {
  grid-area: 2 / 2 / 3 / 3;
}

#div4 {
  grid-area: 2 / 3 / 3 / 4;
}

@media screen and (max-width: 1024px) {
  #grid {
    grid-template-columns: 20% 78% 2%;
  }
}

@media screen and (max-width: 850px) {
  #grid {
    grid-template-columns: 8.5% 83% 8.5%;
  }
}

要实现sidebar与Div2宽度完全匹配，核心是让sidebar继承Div2的宽度，同时调整定位避免脱离文档流破坏布局，具体步骤如下：

1. 修改Sidebar核心样式 #

替换.side-bar的固定宽度设置，改为继承父容器宽度，并调整定位逻辑：

.side-bar {
  background: #1b1a1b;
  backdrop-filter: blur(15px);
  width: 100%; /* 改为100%继承父容器宽度 */
  height: 100%; /* 匹配Div2的高度 */
  position: relative; /* 从fixed改为relative，避免脱离文档流 */
  z-index: 50;
  overflow-y: auto;
  transition: 0.6s ease;
  transition-property: left;
}

同时给Div2设置高度，确保侧边栏能占满网格区域：

#div2 {
  grid-area: 1 / 1 / 3 / 2;
  height: 100%;
}

如果需要保留侧边栏固定在视口的效果，可通过JS动态同步Div2的宽度和位置：

function syncSidebarWithDiv2() {
  const div2 = document.getElementById('div2');
  const sidebar = document.querySelector('.side-bar');
  if (!div2 || !sidebar) return;
  
  const { offsetWidth, offsetLeft } = div2;
  sidebar.style.width = `${offsetWidth}px`;
  sidebar.style.left = `${offsetLeft}px`;
}

// 初始化执行
syncSidebarWithDiv2();
// 窗口 resize 时重新同步
window.addEventListener('resize', syncSidebarWithDiv2);

2. 简化DOM层级 #

移除无额外样式的<aside>标签，减少冗余层级：

<div id="div2">
  <sidebar></sidebar>
</div>

3. 响应式适配 #

修改后的sidebar会自动继承Div2在不同屏幕下的宽度，原有网格布局的媒体查询规则无需调整，可直接复用。

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