Ширина 100% не используется в полноэкранном режиме

Question

Я построил измененную таблицу табуляции. Когда вы нажимаете на вкладки с левой стороны, они переключают содержимое справа. Единственная проблема заключается в том, что основной контент div справа, даже с шириной 100%, составляет примерно треть пути по экрану. Любые идеи почему?

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#container { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#topBar1 { 
 
    height: 55px; 
 
    width: 100%; 
 
    background-color: #FAFAFA; 
 
    border-bottom: 1px solid #d9d9d9; 
 
    display: block; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
#topBar2 { 
 
    height: 22px; 
 
    width: 100%; 
 
    background-color: #FAFAFA; 
 
    display: block; 
 
    border-radius: 11%; 
 
    box-shadow: 0 6px 10px -2.5px #ccc; 
 
    position: relative; 
 
    z-index: 2; 
 
    transition: all; 
 
} 
 
main { 
 
    display: block; 
 
    background-color: #EEEEEE; 
 
    height: 1000px; 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: 1; 
 
    top: -5px; 
 
} 
 
nav { 
 
    height: 100%; 
 
    width: 261px; 
 
} 
 
nav::after { 
 
    height: 100%; 
 
    width: 1px; 
 
    content: ""; 
 
    display: block; 
 
    background: #d9d9d9; 
 
    position: relative; 
 
    left: 260px; 
 
    top: -1000px; 
 
} 
 
input[type=radio] { 
 
    display: none; 
 
} 
 
.tabs { 
 
    list-style: none; 
 
    position: relative; 
 
    //border: 1px solid #ccc; 
 
    width: 260px; 
 
    height: 100%; 
 
    top: 15px; 
 
} 
 
.tabs li { 
 
    font-family: Roboto, sans-serif; 
 
    font-size: 13px; 
 
    padding: 10px 20px 20px 60px; 
 
    color: #222222; 
 
    //border: 1px solid #ccc; 
 
    background-color: none; 
 
    transition: all .2s ease-in-out; 
 
} 
 
.tabs li:hover { 
 
    background-color: #d9d9d9; 
 
} 
 
.tabs li:active { 
 
    background-color: #d9d9d9; 
 
} 
 
.tabs label { 
 
    display: block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    top: 6px; 
 
} 
 
.tab-content { 
 
    position: absolute; 
 
    display: none; 
 
    z-index: 2; 
 
    height: 100%; 
 
    width: 100%; 
 
    left: 261px; 
 
    top: 0; 
 
    border: 1px solid #ccc; 
 
} 
 
[id^=tab]:checked~[class^=tab-content] { 
 
    display: block; 
 
} 
 
.contentItem { 
 
    //border: 1px solid #ccc; 
 
    height: 38px; 
 
    width: 200px; 
 
    margin-left: 10px; 
 
    margin-top: 10px; 
 
    margin-bottom: 20px; 
 
    margin-left: 10px; 
 
    background-color: #FAFAFA; 
 
    box-shadow: .5px 2px 6px #ccc; 
 
    float: left; 
 
} 
 
.documentIcon { 
 
    height: 30px; 
 
    width: 30px; 
 
    border: 1px solid #ccc; 
 
    margin: 3px; 
 
    margin-left: 5px; 
 
    margin-right: 10px; 
 
    float: left; 
 
} 
 
.contentText { 
 
    font-family: Roboto, sans-serif; 
 
    font-size: 12px; 
 
    color: #222222; 
 
    line-height: 3; 
 
}

<div id="container"> 
 
    <div id="topBar1"></div> 
 
    <!--topBar--> 
 
    <div id="topBar2"></div> 
 
    <!--topBar2--> 
 

 
    <main> 
 
    <nav> 
 
     <ul class="tabs"> 
 
     <li> 
 
      <input type="radio" name="tabs" id="tab-1" checked /> 
 
      <label for="tab-1">Staff Directory</label> 
 

 
      <div class="tab-content" id="tab-content-1"> 
 
      <div class="contentItem" id="ci1"> 
 
       <img src="" alt="" class="documentIcon" /> 
 
       <p class="contentText">Telephone Extension List</p> 
 
      </div> 
 

 

 

 
      </div> 
 
      <!--tab-content--> 
 
     </li> 
 

 
     <li> 
 
      <input type="radio" name="tabs" id="tab-2" /> 
 
      <label for="tab-2">How-To Guides</label> 
 
      <div class="tab-content" id="tab-content-2"> 
 
      <p>Put Tab 2 Content here</p> 
 
      </div> 
 
     </li> 
 

 
     <li> 
 
      <input type="radio" name="tabs" id="tab-3" /> 
 
      <label for="tab-3">OECTA Calendar</label> 
 
      <div class="tab-content" id="tab-content3"> 
 
      <p>Put tab content 3 here</p> 
 
      </div> 
 
     </li> 
 

 
     <li> 
 
      <input type="radio" name="tabs" id="tab-4" /> 
 
      <label for="tab-4">Finance</label> 
 
      <div class="tab-content" id="tab-content-4"> 
 
      <p>Put tab content for 4 here</p> 
 
      </div> 
 
     </li> 
 

 
     <li> 
 
      <input type="radio" name="tabs" id="tab-5" /> 
 
      <label for="tab-5">Directories and Contact Lists</label> 
 
      <div class="tab-content" id="tab-content-5"> 
 
      <p>Put Tab 5 content here</p> 
 
      </div> 
 
     </li> 
 

 
     <li> 
 
      <input type="radio" name="tabs" id="tab-6" /> 
 
      <label for="tab-6">Upcoming Meetings</label> 
 
      <div class="tab-content" id="tab-content-6"> 
 
      <p>Put tab 6 content here</p> 
 
      </div> 
 
     </li> 
 

 

 
     <li> 
 
      <input type="radio" name="tabs" id="tab-7" /> 
 
      <label for="tab-7">Manuals and Handbooks</label> 
 
      <div class="tab-content" id="tab-content-7"> 
 
      <p>Tab Content 7</p> 
 
      </div> 
 
     </li> 
 

 
     <li> 
 
      <input type="radio" name="tabs" id="tab-8" /> 
 
      <label for="tab-8">Information and Forms</label> 
 
      <div class="tab-content" id="tab-content-8"> 
 
      <p>Tab Content 8</p> 
 
      </div> 
 
     </li> 
 

 
     <li> 
 
      <input type="radio" name="tabs" id="tab-9" /> 
 
      <label for="tab-9">Visitor Information</label> 
 
      <div class="tab-content" id="tab-content-9"> 
 
      <p>Tab Content 9</p> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 

 
    </main> 
 

 
</div>

Answer 1

Вы ищете что-то вроде этого? https://jsfiddle.net/csgn6051/9/

.tabs 
{ 
    width: calc(100% - 270px); 
}