Пустое пространство между вкладкой и содержимым

Я хочу отобразить содержимое каждой вкладки. Но там пустое место.

На первой вкладке нет свободного места, но оно есть на других вкладках. Я хочу устранить этот пробел

Как решить эту проблему? (Пожалуйста, не предлагайте код Java Script.)

На следующем рисунке показана эта проблема

Между вкладкой и содержимым есть свободное пространство

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

Источник

2 ответа

Решение

Я изменил 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>

Источник

Пустое пространство объясняется тем фактом, что в трехмерном пространстве браузера (своего рода) по-прежнему существует содержимое предыдущих вкладок, которые заставляют остальные соответствующим образом перемещаться вниз. Вам нужно будет эффективно сделать их невидимыми как визуально, так и в трехмерном пространстве браузера, т.е. установить для их свойства отображения значение display:none, Но это вызывает еще одну проблему, проблема в том, что display:none не подвержены влиянию времени / задержки перехода, поэтому оно почти мгновенно, а другие ваши переходы будут бесполезны.

Таким образом, чтобы подвести итог у вас есть три варианта

  1. Найдите способ реализовать код javascript/jQuery.
  2. Вам просто придется с этим жить.
  3. Баловаться с float а также position свойства
Источник
Другие вопросы по тегам