これを全幅にする方法はありますか？

Question

私はこのアコーディオンをどんなサイズでもフルスクリーンにしたいと思っています。 私はそれをフルハイトにすることができましたが、全幅にしていました。 ％を使用しようとしましたが、変更があればランダムな結果が得られます。 これを行う方法はありますか？

* { 
 
    margin: 0; 
 
\t padding: 0; 
 
\t box-sizing: content-box; 
 
    } 
 
\t 
 
.accordion { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    border-width: 0px; 
 
    margin: 0; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 

 
.accordion > ul > li, 
 
.accordion-title, 
 
.accordion-content, 
 
.accordion-separator { 
 
    float: left; 
 
} 
 

 
.accordion > ul > li { 
 
    background-color: #b62a2a; 
 
    margin-right: -1200px; 
 
    margin-bottom: -0px; 
 
} 
 

 
.accordion-select:checked ~ .accordion-separator { 
 
    margin-right: 1200px; 
 
    margin-bottom: 0px; 
 
} 
 

 
.accordion-title, 
 
.accordion-select { 
 
\t background-color: #ed2945; 
 
\t color: #ffffff; 
 
\t width: 2.5em; 
 
\t height: 100vh; 
 
\t font-size: 15px; 
 
} 
 

 
.accordion-title span { 
 
    margin-bottom: 20px; 
 
    margin-left: 20px; 
 
} 
 

 
.accordion-select:hover ~ .accordion-title, 
 
.accordion-select:checked ~ .accordion-title { 
 
    background-color: #c22439; 
 
} 
 

 
.accordion-title span { \t 
 
    transform: rotate(-90deg); 
 
    -o-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -webkit-transform: rotate(-90deg); 
 
    -ms-writing-mode: lr-bt; 
 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
 
    margin-left: 0px; 
 
    line-height: 40px; 
 
} 
 

 
.accordion-content { 
 
    background-color: #8E7B7B; 
 
    color: #C22439; 
 
    height: 100vh; 
 
    width: 1104px; 
 
    padding: 48px; 
 
} 
 

 
.accordion-title, 
 
.accordion-select:checked ~ .accordion-content { 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
} 
 

 
.accordion { 
 
    overflow: hidden; 
 
} 
 

 
.accordion > ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    width: 101%; 
 
} 
 

 
.accordion > ul > li, 
 
.accordion-title { 
 
    position: relative; 
 
} 
 

 
.accordion-select { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 0; 
 
    left: 0; 
 
    margin: 0; 
 
    z-index: 1; 
 
} 
 

 
.accordion-title span { 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    white-space: nowrap; 
 
} 
 

 
.accordion-content { 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
.accordion-separator { 
 
    transition: margin 0.3s ease 0.1s; 
 
    -o-transition: margin 0.3s ease 0.1s; 
 
    -moz-transition: margin 0.3s ease 0.1s; 
 
    -webkit-transition: margin 0.3s ease 0.1s; 
 
}

<div class="accordion"> 
 
    <ul> 
 
     <li> 
 
      <input type="radio" name="select" class="accordion-select" checked /> 
 
      <div class="accordion-title"> 
 
       <span>Title</span> 
 
      </div> 
 
      <div class="accordion-content"> 
 
       Content 
 
      </div> 
 
      <div class="accordion-separator"></div> 
 
     </li> 
 
     <li> 
 
      <input type="radio" name="select" class="accordion-select" /> 
 
      <div class="accordion-title"> 
 
       <span>Title</span> 
 
      </div> 
 
      <div class="accordion-content"> 
 
       Content 
 
      </div> 
 
      <div class="accordion-separator"></div> 
 
     </li> 
 
     <li> 
 
      <input type="radio" name="select" class="accordion-select" /> 
 
      <div class="accordion-title"> 
 
       <span>Title</span> 
 
      </div> 
 
      <div class="accordion-content"> 
 
       Content 
 
      </div> 
 
      <div class="accordion-separator"></div> 
 
     </li> 
 
     <li> 
 
      <input type="radio" name="select" class="accordion-select" /> 
 
      <div class="accordion-title"> 
 
       <span>Title</span> 
 
      </div> 
 
      <div class="accordion-content"> 
 
       Content 
 
      </div> 
 
      <div class="accordion-separator"></div> 
 
     </li> 
 
     <li> 
 
      <input type="radio" name="select" class="accordion-select" /> 
 
      <div class="accordion-title"> 
 
       <span>Title</span> 
 
      </div> 
 
      <div class="accordion-content"> 
 
       Content 
 
      </div> 
 
      <div class="accordion-separator"></div> 
 
     </li> 
 
    </ul> 
 
</div>

Answer 1

それは働いていない

.accordion { 
    font-family: Arial, Helvetica, sans-serif; border-width: 0px; 
    margin: 0; 
    height: 100vh; 
    width: auto; 
}