css - 选项卡和内容之间的空白

Question

我想显示每个选项卡的内容。但是有一个空的空间。

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

如何解决这个问题？ (请不要建议任何 Java Script 代码。)

下图说明了这个问题

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

我更改了 .tab-content 的 CSS，使高度也具有动画效果。我还删除了 .tab-content-container 的 float ，因为它没有任何用途。

.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>