无需JavaScript：实现DIV达到特定宽度时隐藏的CSS方案

核心思路 #

用**容器查询（Container Queries）**配合视口媒体查询，同时覆盖两种场景：视口宽度不足的正常缩放场景，以及侧边栏展开挤压父容器宽度的场景。容器查询可以直接监测目标DIV父容器的宽度变化，无需依赖JavaScript。

实现代码 #

HTML结构示例

<div class="page-wrap">
  <!-- 可展开/收起的侧边栏 -->
  <aside class="sidebar">侧边栏内容</aside>
  <!-- 目标DIV的父容器，设置容器查询上下文 -->
  <main class="content-area">
    <div class="target-div">需要隐藏的DIV</div>
    <!-- 其他页面内容 -->
  </main>
</div>

CSS样式

/* 给父容器设置容器查询上下文，使其宽度变化可被监测 */
.content-area {
  container-type: inline-size;
}

/* 场景1：视口宽度≤1024px时隐藏目标DIV */
@media (max-width: 1024px) {
  .target-div {
    display: none;
  }
}

/* 场景2：父容器宽度≤1024px时隐藏目标DIV（侧边栏挤压场景） */
@container (max-width: 1024px) {
  .target-div {
    display: none;
  }
}

/* 侧边栏基础样式及展开/收起逻辑 */
.sidebar {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  background: #f5f5f5;
}
.sidebar.open {
  width: 300px; /* 侧边栏展开后的宽度 */
}

.page-wrap {
  display: flex;
  width: 100%;
}
.content-area {
  flex: 1;
  padding: 1.5rem;
}

关键说明 #

• 容器查询@container会监听.content-area的实时宽度，当侧边栏展开挤压该容器至1024px以下时，自动隐藏目标DIV；侧边栏收起后容器宽度恢复，目标DIV重新显示。
• 保留@media (max-width: 1024px)以覆盖浏览器正常缩放至视口宽度不足的场景。
• 容器查询目前已被主流浏览器支持（Chrome 105+、Firefox 110+、Safari 16+），无需额外兼容方案即可覆盖绝大多数用户场景。

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