浏览器Resize时左侧固定侧边栏转顶部栏，右侧列移至其下的布局实现

我来帮你搞定这个响应式布局需求！下面是调整后的完整代码和关键说明，完全匹配你想要的效果：

修改后的完整代码 #

HTML（结构无需改动） #

<!DOCTYPE html>
<html lang="en">
<body>
<div class="sidebar">
<h2>Sidebar</h2>
</div>
<div class="right-column">
<div class="content" id="1">
<div class="card">
<p>Card number 1</p>
</div>
</div>
<div class="content" id="2">
<div class="card">
<p>Card number 2</p>
</div>
</div>
<div class="content" id="3">
<div class="card">
<p>Card number 3</p>
</div>
</div>
<div class="content" id="4">
<div class="card">
<p>Card number 4</p>
</div>
</div>
</div>
</body>
</html>

CSS（核心调整部分） #

body { 
  margin: 0; 
  box-sizing: border-box; /* 统一盒模型，避免间距计算混乱 */
}

/* 大屏状态：左侧固定侧边栏 + 右侧卡片列 */
.sidebar { 
  width: 40%; 
  height: 100vh; 
  text-align: center; 
  position: fixed; 
  background-color: #ffffff; 
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 2px 2px 5px rgba(0, 0, 0, 0.1); 
}

.right-column { 
  width: 60%; 
  min-height: 100vh; /* 确保背景色铺满视口 */
  margin-left: 40%; 
  background-color: #F9F9F9; 
  padding: 2% 0; /* 优化卡片上下间距 */
  box-sizing: border-box;
}

.card { 
  display: flex; 
  align-items: center; /* 卡片内容垂直居中 */
  justify-content: center; /* 卡片内容水平居中 */
  border-radius: 4px; 
  padding: 10%; 
  margin: 5% 10%; /* 保持左右10%边距，调整上下间距更合理 */
  background-color: #fff; 
  box-shadow: 0px 1px 5px #d3d3d3; /* 统一阴影写法，去掉前缀兼容现代浏览器 */
}

/* 小屏响应式切换：侧边栏变顶部栏，右侧列移至下方 */
@media (max-width: 768px) { /* 可根据需求自定义断点宽度 */
  .sidebar { 
    width: 100%; 
    height: 50vh; /* 高度设为视口的50% */
    position: static; /* 取消fixed定位，变为普通流元素 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), 0 2px 5px rgba(0, 0, 0, 0.1); /* 调整阴影为底部方向 */
  }
  
  .right-column { 
    width: 100%; 
    margin-left: 0; /* 移除左侧边距，占满整宽 */
    min-height: auto; /* 高度随内容自适应 */
  }
}

关键调整点说明 #

• 统一盒模型：给body和right-column添加box-sizing: border-box，确保内边距和边框不会额外撑开元素宽度，避免布局错位。
• 大屏布局优化：给right-column设置min-height: 100vh，保证背景色铺满整个视口；调整卡片的margin值，让上下间距更协调。
• 响应式断点选择：改用max-width作为媒体查询条件（原代码用的max-height不符合宽度resize的场景），768px是平板设备的常用断点，你可以根据需求修改这个值。
• 小屏布局适配：
  • 侧边栏改为全屏宽度、50vh高度，同时取消fixed定位，变成顶部栏。
  • 右侧列移除左侧边距，宽度设为100%，自动移到侧边栏下方。
  • 调整侧边栏的阴影方向，适配顶部栏的视觉效果。
• 卡片内容对齐：给card添加align-items: center和justify-content: center，确保卡片内的文字始终保持垂直水平居中，符合你的对齐要求。

这样调整后，当浏览器宽度缩小到断点以下时，布局会自动切换：侧边栏变为顶部的半屏高度栏，右侧卡片列移到下方，同时所有元素的间距比例和内容对齐方式都能完美保留。

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