选项卡和内容之间的空白

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

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

所以总结一下，你有三个选择

1. 想办法实现 javascript/jQuery 代码。
2. 你只需要忍受它。
3. 尝试使用 float 和 position 属性

Answer 2

我更改了.tab-content 的CSS，这样高度也可以动画化。我还删除了 .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>