将内容选项卡容器拉伸至 100%

Question

如何将选项卡内容容器拉伸到屏幕的 100%？

.season_tabs {
  position: relative;   
  min-height: 360px;
  clear: both;
  margin: 25px 0;
}

.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;
}
 
.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;
}

<div class="season_tabs">

   <div class="season_tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">tab 1</label>

       <div class="season_content">
           <span>content 1</span>
       </div> 
   </div>

   <div class="season_tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">tab 2</label>

       <div class="season_content">
           <span>content 2</span>
       </div> 
   </div>

    <div class="season_tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">tab 3</label>

       <div class="season_content">
           <span>content 3</span>
       </div> 
   </div>
      <div class="season_tab">
       <input type="radio" id="tab-4" name="tab-group-1">
       <label for="tab-4">tab 4</label>

       <div class="season_content">
           <span>content 4</span>
       </div> 
   </div>

</div>

Answer 1

这是您希望实现的目标吗？主要的变化是我将

min-height: 100dvh;

添加到您的

.session_tabs

以确保它们始终全屏。 dvh 是动态视口高度，占据整个视口减去移动设备上的地址栏。

如果需要，您还可以使用绝对定位来强制获得完整视图，具体取决于您的设计需求。

此外，我还删除了正文和

.session_tabs

的边距，以防止其出现尴尬的间隙。

如果有任何需要澄清的地方，请随时询问

body {
  margin: 0;
}

.season_tabs {
  position: relative;   
  min-height: 100dvh;
  clear: both;
}

.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;
}
 
.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;
}

<div class="season_tabs">

   <div class="season_tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">tab 1</label>

       <div class="season_content">
           <span>content 1</span>
       </div> 
   </div>

   <div class="season_tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">tab 2</label>

       <div class="season_content">
           <span>content 2</span>
       </div> 
   </div>

    <div class="season_tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">tab 3</label>

       <div class="season_content">
           <span>content 3</span>
       </div> 
   </div>
      <div class="season_tab">
       <input type="radio" id="tab-4" name="tab-group-1">
       <label for="tab-4">tab 4</label>

       <div class="season_content">
           <span>content 4</span>
       </div> 
   </div>

</div>