如何让旋转文本背景色适配tabs div？解决高度100%溢出问题

你要实现垂直旋转的标签效果，整个页面采用Grid布局，但给.prints和.shop设置height:100%填充.tabs容器时出现溢出，问题根源在于：

• 旋转元素（rotate(90deg)）的盒模型宽高会互换，直接设置height:100%会导致尺寸超出容器范围
• .tabs为inline-block且未定义明确尺寸，子元素的height:100%没有有效参考基准
• top属性需要配合定位（如position: relative/absolute）才会生效，当前设置无作用

以下是调整后的代码，既实现Grid布局需求，又解决溢出问题：

修改后的CSS #

/* 页面Grid布局框架，可根据实际需求调整 */
body {
  display: grid;
  grid-template-columns: 60px 1fr; /* 左侧标签栏 + 右侧内容区 */
  min-height: 100vh;
  margin: 0;
}

.tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #f5f5f5;
}

.prints, .shop {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 调整旋转原点，避免元素偏移 */
  transform-origin: center center;
  transform: rotate(90deg);
  /* 固定旋转后文本宽度，防止换行 */
  width: 100vh;
}

.prints {
  background: black;
  color: #ffffe6;
}

.shop {
  background: #e95514;
  color: black;
}

修改后的HTML #

<div class="tabs">
  <div class="prints">PRINTS</div>
  <div class="shop">SHOP</div>
</div>
<!-- 右侧内容区示例 -->
<div class="content">页面主体内容</div>

关键调整说明： #

1. 给body设置Grid布局，明确左侧标签栏与右侧内容区的结构划分
2. .tabs改用Flex布局垂直排列标签，通过justify-content: space-between实现上下分布，替代无效的top属性
3. 用flex:1让标签自动填充.tabs的可用空间，避免直接设置height:100%引发的旋转尺寸溢出
4. 调整transform-origin确保旋转后元素位置正常，设置足够宽度避免文本换行

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