如何将Tab内容容器拉伸至屏幕100%宽度？

要让你的Tab内容容器铺满屏幕宽度，需要调整几个关键CSS属性，以下是具体方案：

1. 消除页面默认空白与父容器限制 #

浏览器默认会给body添加外边距，同时你的.season_tabs容器没有明确占满屏幕宽度，这会导致内容无法贴合屏幕边缘。先修改这两处：

body {
  margin: 0; /* 消除浏览器默认的页面空白 */
}

.season_tabs {
  position: relative;   
  min-height: 360px;
  clear: both;
  margin: 25px 0; /* 保留上下间距，若需完全贴顶可改为margin:0 */
  width: 100%; /* 强制占满父容器宽度 */
  box-sizing: border-box; /* 确保padding和border不会超出设定宽度 */
}

2. 调整内容容器的适配性 #

你的.season_content已经设置了right:0，但需要补充box-sizing避免内部padding导致内容溢出：

.season_content {
  position: absolute;
  top: 0;
  left: 286px;
  background: white;
  right: 0; /* 让容器右侧贴合屏幕边缘 */
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* 内部padding不会增加容器总宽度 */
}

修改后的完整CSS代码 #

body {
  margin: 0;
}

.season_tabs {
  position: relative;   
  min-height: 360px;
  clear: both;
  margin: 25px 0;
  width: 100%;
  box-sizing: border-box;
}

.season_tab {
  float: left;  
  clear: both;
  width: 286px;
}

.season_tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  font-size: 21px;
  vertical-align: middle;
  position: relative;
  left: 1px;
  width: 264px;
  height: 68px;
  display: table-cell;
}

.season_tab [type=radio] {
  display: none;   
}

.season_content {
  position: absolute;
  top: 0;
  left: 286px;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
 
.season_content span {
  animation: 0.5s ease-out 0s 1 slideInFromTop; 
}

[type=radio]:checked ~ label {
  background: white;
  border-right-color: #FFF;
  border-left: 2px solid #2C71DA;
  font-weight: bold;
  z-index: 2;
}

[type=radio]:checked ~ label ~ .season_content {
  z-index: 1;
}

效果说明 #

• 消除了浏览器默认的页面空白，确保容器从屏幕边缘开始布局
• 父容器season_tabs占满屏幕宽度，内容容器season_content通过right:0贴合屏幕右侧
• box-sizing:border-box保证padding和border不会导致容器超出屏幕范围

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