css Drop-Down nach Höhe nicht automatisch

Question

Hallo dieses Dropdown hat eine feste Größe im Tab-Inhalt. Es ist abgeschnitten, wenn es größer als eine bestimmte Länge Text ist. Ich brauche es automatisch, damit sich die Box an die Größe anpasst. Ich habe versucht, die CSS zu arbeiten, aber kein Glück, danke.

.tab { 
 
    position: relative; 
 
    margin-bottom: 1px; 
 
    width: 100%; 
 
    color: #fff; 
 
    overflow: hidden; 
 
} 
 

 
input { 
 
    position: absolute; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 

 
label { 
 
    position: relative; 
 
    display: block; 
 
    padding: 0 0 0 1em; 
 
    background: #16a085; 
 
    font-weight: bold; 
 
    line-height: 3; 
 
    cursor: pointer; 
 
} 
 

 
.blue label { 
 
    background: #2980b9; 
 
} 
 

 
.tab-content { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    background: #1abc9c; 
 
    -webkit-transition: max-height .35s; 
 
    -o-transition: max-height .35s; 
 
    transition: max-height .35s; 
 
} 
 

 
.tab-content p { 
 
    margin: 1em; 
 
} 
 

 

 
/* :checked */ 
 

 
input:checked~.tab-content { 
 
    max-height: 10em; 
 
} 
 

 

 
/* Icon */ 
 

 
label::after { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    display: block; 
 
    width: 3em; 
 
    height: 3em; 
 
    line-height: 3; 
 
    text-align: center; 
 
    -webkit-transition: all .35s; 
 
    -o-transition: all .35s; 
 
    transition: all .35s; 
 
} 
 

 
input[type=checkbox]+label::after { 
 
    content: "+"; 
 
} 
 

 
input[type=radio]+label::after { 
 
    content: "\25BC"; 
 
} 
 

 
input[type=checkbox]:checked+label::after { 
 
    transform: rotate(315deg); 
 
} 
 

 
input[type=radio]:checked+label::after { 
 
    transform: rotateX(180deg); 
 
}

<div class="tab"> 
 
    <input id="tab-one" type="checkbox" name="tabs"> 
 
    <label for="tab-one">Label One</label> 
 
    <div class="tab-content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.em ipsum dolor sit 
 
     amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaqueem ipsum dolor sit amet, consectetur adipisicing 
 
     elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque</p> 
 
    </div> 
 
</div> 
 
<div class="tab"> 
 
    <input id="tab-two" type="checkbox" name="tabs"> 
 
    <label for="tab-two">Label Two</label> 
 
    <div class="tab-content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> 
 
    </div> 
 
</div> 
 
<div class="tab"> 
 
    <input id="tab-three" type="checkbox" name="tabs"> 
 
    <label for="tab-three">Label Three</label> 
 
    <div class="tab-content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> 
 
    </div> 
 
</div> 
 
</div> 
 

 
<div class="half"> 
 
    <p>Open <strong>one</strong></p> 
 
    <div class="tab blue"> 
 
    <input id="tab-four" type="radio" name="tabs2"> 
 
    <label for="tab-four">Label One</label> 
 
    <div class="tab-content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> 
 
    </div> 
 
    </div>

Answer 1

Sie können max-height auf Höhe ersetzen, sondern Ihre transition Effekt wird tot sein. Denn in CSS müssen Sie einen height Wert übergeben, um den Übergangseffekt zu erhalten.

I posted editierbare Antwort mit height:auto und opacity

.tab { 
 
    position: relative; 
 
    margin-bottom: 1px; 
 
    width: 100%; 
 
    color: #fff; 
 
    overflow: hidden; 
 
} 
 

 
input { 
 
    position: absolute; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 

 
label { 
 
    position: relative; 
 
    display: block; 
 
    padding: 0 0 0 1em; 
 
    background: #16a085; 
 
    font-weight: bold; 
 
    line-height: 3; 
 
    cursor: pointer; 
 
} 
 

 
.blue label { 
 
    background: #2980b9; 
 
} 
 

 
.tab-content { 
 
    height: 0; 
 
    overflow: hidden; 
 
    opacity: 0; 
 
    background: #1abc9c; 
 
    -webkit-transition: all .35s; 
 
    -o-transition: all .35s; 
 
    transition: all .35s; 
 
} 
 

 
.tab-content p { 
 
    margin: 1em; 
 
} 
 

 

 
/* :checked */ 
 

 
input:checked~.tab-content { 
 
    height: auto; 
 
    opacity: 1; 
 
} 
 

 

 
/* Icon */ 
 

 
label::after { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    display: block; 
 
    width: 3em; 
 
    height: 3em; 
 
    line-height: 3; 
 
    text-align: center; 
 
    -webkit-transition: all .35s; 
 
    -o-transition: all .35s; 
 
    transition: all .35s; 
 
} 
 

 
input[type=checkbox]+label::after { 
 
    content: "+"; 
 
} 
 

 
input[type=radio]+label::after { 
 
    content: "\25BC"; 
 
} 
 

 
input[type=checkbox]:checked+label::after { 
 
    transform: rotate(315deg); 
 
} 
 

 
input[type=radio]:checked+label::after { 
 
    transform: rotateX(180deg); 
 
}

<div class="tab"> 
 
    <input id="tab-one" type="checkbox" name="tabs"> 
 
    <label for="tab-one">Label One</label> 
 
    <div class="tab-content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.em ipsum dolor sit 
 
     amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaqueem ipsum dolor sit amet, consectetur adipisicing 
 
     elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, 
 
     architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.em ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo 
 
     perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaqueem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, 
 
     maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque</p> 
 
    </div> 
 
</div> 
 
<div class="tab"> 
 
    <input id="tab-two" type="checkbox" name="tabs"> 
 
    <label for="tab-two">Label Two</label> 
 
    <div class="tab-content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> 
 
    </div> 
 
</div> 
 
<div class="tab"> 
 
    <input id="tab-three" type="checkbox" name="tabs"> 
 
    <label for="tab-three">Label Three</label> 
 
    <div class="tab-content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> 
 
    </div> 
 
</div> 
 

 
<div class="half"> 
 
    <p>Open <strong>one</strong></p> 
 
    <div class="tab blue"> 
 
    <input id="tab-four" type="radio" name="tabs2"> 
 
    <label for="tab-four">Label One</label> 
 
    <div class="tab-content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> 
 
    </div> 
 
    </div>