标签和内容之间的空白空间

Question

我想显示每个标签的内容。但是有一个空的空间。

第一个选项卡中没有可用空间，但它存在于其他选项卡中。我想消除这种差距

如何解决这个问题？ （请不要提出任何Java脚本代码。）

下图显示了这个问题

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

玩水，我改变了CSS的.tab-content使得高度也动画。因为它没有任何用途，所以我也删除了浮点数.tab-content-container。

.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

空的空间是因为一个事实，即仍有在浏览器三维空间中存在前一个选项卡的内容（各种），导致其他选项相应地向下移动。您需要有效地使它们在视觉上以及在浏览器3d空间中都不可见，即将其显示属性设置为display:none。但是这会引起另一个问题，问题是display:none不受任何转换时序/延迟的影响，因此它几乎是瞬时的，而其他转换将毫无用处。

所以总结起来有三种选择

1. 找到某种方式来实现的JavaScript/jQuery代码。
2. 你只需要忍受它。与周围的float和position性能