Espace vide entre l'onglet et le contenu

Question

Je souhaite afficher le contenu de chaque onglet. Mais il y a un espace vide.

Il n'y a pas d'espace libre dans le premier onglet mais il existe dans d'autres onglets. Je veux supprimer cet écart

Comment réparer ce problème? (S'il vous plaît ne suggèrent aucun code Java Script.)

La figure suivante illustre ce problème

There is an empty space between the tab and the content

.tab-caption:nth-of-type(1) { 
 
    background-color: #FFAAAA; 
 
} 
 

 
.tab-caption:nth-of-type(2) { 
 
    background-color: #AAFFAA; 
 
} 
 

 
.tab-caption:nth-of-type(3) { 
 
    background-color: #AAAAFF; 
 
} 
 

 
.tab-content:nth-of-type(1) { 
 
    background-color: #FFAAAA; 
 
} 
 

 
.tab-content:nth-of-type(2) { 
 
    background-color: #AAFFAA; 
 
} 
 

 
.tab-content:nth-of-type(3) { 
 
    background-color: #AAAAFF; 
 
} 
 

 
.tab-status { 
 
    display: none; 
 
} 
 

 
    .tab-status ~ .tab-caption-container { 
 
     display: flex; 
 
    } 
 

 
     .tab-status ~ .tab-caption-container > .tab-caption { 
 
      opacity: 0.4; 
 
      cursor: pointer; 
 
     } 
 

 
    .tab-status:nth-of-type(1):checked ~ .tab-caption-container > .tab-caption:nth-of-type(1) { 
 
     opacity: 1; 
 
    } 
 

 
    .tab-status:nth-of-type(2):checked ~ .tab-caption-container > .tab-caption:nth-of-type(2) { 
 
     opacity: 1; 
 
    } 
 

 
    .tab-status:nth-of-type(3):checked ~ .tab-caption-container > .tab-caption:nth-of-type(3) { 
 
     opacity: 1; 
 
    } 
 

 
    .tab-status ~ .tab-content-container > .tab-content { 
 
     width: 100%; 
 
     transform: translate(-100%); 
 
     transition: all 1s; 
 
    } 
 

 
    .tab-status:nth-of-type(1):checked ~ .tab-content-container > .tab-content:nth-of-type(1), 
 
    .tab-status:nth-of-type(2):checked ~ .tab-content-container > .tab-content:nth-of-type(2), 
 
    .tab-status:nth-of-type(3):checked ~ .tab-content-container > .tab-content:nth-of-type(3) { 
 
     transition: all 1s; 
 
     transform: translate(0%); 
 
     transition-delay: 1s; 
 
    } 
 

 
.tab-content-container { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: auto; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
}

<input class="tab-status" id="tabSwitch01" type="radio" name="tab" checked="checked"> 
 
    <input class="tab-status" id="tabSwitch02" type="radio" name="tab"> 
 
    <input class="tab-status" id="tabSwitch03" type="radio" name="tab"> 
 
    <div class="tab-caption-container"> 
 
     <label class="tab-caption" for="tabSwitch01">tab1</label> 
 
     <label class="tab-caption" for="tabSwitch02">tab2</label> 
 
     <label class="tab-caption" for="tabSwitch03">tab3</label> 
 
    </div> 
 
    <div class="tab-content-container"> 
 
     <div class="tab-content">tab1-data<br></div> 
 
     <div class="tab-content">tab2-data<br>tab2-data<br></div> 
 
     <div class="tab-content">tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br></div> 
 
    </div>

Answer 1

J'ai changé le CSS pour .tab-content telle que la hauteur est animée aussi. J'ai également enlevé le flotteur pour .tab-content-container puisqu'il n'a eu aucun but.

.tab-caption:nth-of-type(1) { 
 
    background-color: #FFAAAA; 
 
} 
 

 
.tab-caption:nth-of-type(2) { 
 
    background-color: #AAFFAA; 
 
} 
 

 
.tab-caption:nth-of-type(3) { 
 
    background-color: #AAAAFF; 
 
} 
 

 
.tab-content:nth-of-type(1) { 
 
    background-color: #FFAAAA; 
 
} 
 

 
.tab-content:nth-of-type(2) { 
 
    background-color: #AAFFAA; 
 
} 
 

 
.tab-content:nth-of-type(3) { 
 
    background-color: #AAAAFF; 
 
} 
 

 
.tab-status { 
 
    display: none; 
 
} 
 

 
.tab-status~.tab-caption-container { 
 
    display: flex; 
 
} 
 

 
.tab-status~.tab-caption-container>.tab-caption { 
 
    opacity: 0.4; 
 
    cursor: pointer; 
 
} 
 

 
.tab-status:nth-of-type(1):checked~.tab-caption-container>.tab-caption:nth-of-type(1) { 
 
    opacity: 1; 
 
} 
 

 
.tab-status:nth-of-type(2):checked~.tab-caption-container>.tab-caption:nth-of-type(2) { 
 
    opacity: 1; 
 
} 
 

 
.tab-status:nth-of-type(3):checked~.tab-caption-container>.tab-caption:nth-of-type(3) { 
 
    opacity: 1; 
 
} 
 

 
.tab-status~.tab-content-container>.tab-content { 
 
    width: 100%; 
 
    transform: translate(-100%); 
 
    transition: all 1s; 
 
    height: 0; 
 
} 
 

 
.tab-status:nth-of-type(1):checked~.tab-content-container>.tab-content:nth-of-type(1), 
 
.tab-status:nth-of-type(2):checked~.tab-content-container>.tab-content:nth-of-type(2), 
 
.tab-status:nth-of-type(3):checked~.tab-content-container>.tab-content:nth-of-type(3) { 
 
    transition: all 1s; 
 
    transform: translate(0%); 
 
    transition-delay: 1s; 
 
    height: 100%; 
 
} 
 

 
.tab-content-container { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: auto; 
 
    border: 1px solid #ccc; 
 
}

<input class="tab-status" id="tabSwitch01" type="radio" name="tab" checked="checked"> 
 
<input class="tab-status" id="tabSwitch02" type="radio" name="tab"> 
 
<input class="tab-status" id="tabSwitch03" type="radio" name="tab"> 
 
<div class="tab-caption-container"> 
 
    <label class="tab-caption" for="tabSwitch01">tab1</label> 
 
    <label class="tab-caption" for="tabSwitch02">tab2</label> 
 
    <label class="tab-caption" for="tabSwitch03">tab3</label> 
 
</div> 
 
<div class="tab-content-container"> 
 
    <div class="tab-content">tab1-data<br></div> 
 
    <div class="tab-content">tab2-data<br>tab2-data<br></div> 
 
    <div class="tab-content">tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br></div> 
 
</div>

Answer 2

L'espace vide est en raison du fait qu'il ya encore existe le contenu du ou des onglet (s) précédent (s) dans l'espace des navigateurs 3D (en quelque sorte) qui fait descendre le reste en conséquence. Vous devrez les rendre invisibles à la fois visuellement et dans l'espace 3D des navigateurs, c'est-à-dire définir leur propriété d'affichage sur display:none. Mais ceci cause encore un autre problème, le problème étant que le display:none n'est affecté par aucun timing/délai de transition, donc ses transitions presque instantanées et vos autres seront inutiles.

Donc, pour résumer, vous avez trois options

1. trouver un moyen de mettre en œuvre javascript/code jQuery.
2. Il ne vous reste plus qu'à vivre avec.
3. Dabble autour des float et position propriétés