Search code examples
htmlcsstabs

Stretching content tab container to 100%

How do I go about stretching my tab content container to 100% of the screen?

enter image description here

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

Solution

  • Is this what you're hoping to accomplish? The major change is I added min-height: 100dvh; to your .session_tabs to make sure they're always full screen. dvh is the dynamic viewport height, taking up the full viewport minus the address bar on mobile.

    You could also use absolute positioning to force a full view if needed, depending on your design needs.

    Additionally, I removed margin from the body and .session_tabs to prevent it from having awkward gaps.

    If anything needs clarification, don't hesitate to ask

    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>