Breite 100% verwendet nicht Vollbild

Question

Ich habe eine modifizierte Tab-Chart erstellt. Wenn Sie auf die Registerkarten auf der linken Seite klicken, wechseln sie den Inhalt auf der rechten Seite. Das einzige Problem ist das Hauptinhaltsdiv auf der rechten Seite, sogar mit einer Breite von 100% geht nur etwa ein Drittel des Weges über den Bildschirm. Irgendwelche Ideen warum?

* { 
 
    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

suchen Sie nach so etwas wie das? https://jsfiddle.net/csgn6051/9/

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