有没有办法可以制作这个全宽？

Question

我想让这款手风琴成为任何尺寸的全屏幕。 我设法使它成为全高，但坚持使其全宽。 我试图使用百分比，但任何改变都会带来随机结果。 有没有办法让我完成这件事？

* {
    margin: 0;
	padding: 0;
	box-sizing: content-box;
  }
	
.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  {
	background-color: #ed2945;
	color: #ffffff;
	width: 2.5em;
	height: 100vh;
	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  {	
    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

尝试

%b