Как исправить эту вкладку, которая использует абсолютную позицию?

Question

Я знаю, как работает абсолютная позиция, но в этом случае это портит макет.Конечно, я могу использовать min-height для каждого размера экрана, используя медиа-запросы, но это не полностью защищенное решение, поскольку клиент может загрузить изображение любого размера.

Содержимое снизу перекрывает вкладку, в которой используется абсолютноепозиция.Я использую абсолютное положение, чтобы анимация работала.Есть ли возможность добавить код JQuery для определения высоты изображения и автоматически применить его или есть лучшее решение?Как решить эту проблему?

JSFiddle: https://jsfiddle.net/6yo5b198/

HTML:

<div class="modules">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-12">
        <div id="exTab1">
          <div class="row">
            <div class="col-md-3 col-12">
              <ul class="nav nav-pills">
                <li class="active">
                  <a class="nav-link active" href="#a1a" data-toggle="tab">Overview</a>
                </li>
                <li><a class="nav-link " href="#a2a" data-toggle="tab">About Us</a>
                </li>
                <li><a class="nav-link " href="#a3a" data-toggle="tab">Services</a>
                </li>
              </ul>
            </div>
            <div class="col-md-9 col-12">
              <div class="tab-content clearfix">
                <div class="tab-pane active" id="a1a">
                  <img src="https://i.postimg.cc/xjFVtP8v/1511048-810098669070876-8091817687576561426-n.jpg">
                </div>
                <div class="tab-pane" id="a2a">
                  <img src="https://i.postimg.cc/d3XM3JpH/198582c8c440a3a96817d79a6dc28731-640x469.jpg">
                </div>
                <div class="tab-pane" id="a3a">
                  <img src="https://i.postimg.cc/qMhVYC69/50445941-10213980102716788-1077889899119509504-n.jpg">
                </div>
              </div>
            </div>
          </div>
        </div>
            </div>
        </div>
    </div>
</div>
<div class="">
  <h1>Other web contents go here.</h1>
</div>

CSS:

.tab-content .tab-pane img {
  opacity: 0;
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  max-width: 100%;
  height: auto;
}
.tab-content .active img {
  opacity: 1;
  transform: translate(0);
}
#exTab1 .tab-content {
  overflow: hidden;
}
#exTab1 .tab-content .tab-pane {
  display: block;
  position: absolute;
  overflow: hidden;
}

Answer 1

Вы не хотите min-height, потому что вы не знаете высоту на каждом уровне реагирования (на мобильных устройствах она может быть ниже).Вам нужно, чтобы вкладка .active установила высоту вкладок.Для этого вам необходимо включить его в поток документов, установив для его position значение static.

#exTab1 .tab-content .tab-pane.active {
  position: static;
}

Для этого также необходимо добавить top: 0 к другим.Без него вкладки после активных в данный момент будут располагаться не в верхней части контейнера вкладок, а в нижней части активной.

Обновленная скрипта: https://jsfiddle.net/websiter/grkn493p/

---

Примечание: если вы также хотите, чтобы изменение высоты контейнера было плавным, вы должны использовать height для контейнера и перемещать его при каждом изменении вкладки, считывая его с высотытекущая вкладка.

Установите переход:

#exTab1 .tab-content {
  transition: height .3s cubic-bezier(.4,0,.2,1);
}

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

$(function() {
// on document ready...

  $('.nav').on('shown.bs.tab', function(e){
  // on every `shown.bs.tab` triggered on a `.nav`, run this code:

    const $target = $($(e.target).attr('href'));
    //find target from `href` tab attribute

    $target.is('div') && $target.closest('.tab-content').css({
    // if target is div, set it's css to

      height: $target.height()
      // the height of target (defined above)

    })
  });
});

Обновленная скрипка:https://jsfiddle.net/websiter/uz0fkrj2/

Обратите внимание, что обновленная скрипка была сделана еще дальше.Я заметил, что установленная высота контейнера не обновляется при изменении размера страницы.Это ставит две разные проблемы:

• a) функция обновления высоты должна измениться на целевую независимость (потому что мы не знаем цель в событии resize).Но это легко исправить, поскольку целью является текущая .active панель вкладок.
• b) window.resize срабатывает слишком часто, и установка высоты каждого вкладки-контейнера на странице так часто приводит к проблемам с производительностью (анимация страницы будет колебаться).Чтобы избежать этого, я throttle включил функцию обновления (не позволяя запускать ее чаще, чем x миллисекунды).Я импортировал lodash и использовал его _.throttle метод - есть эквивалент jQuery, но я не уверен в его синтаксисе - никогда не использовал его.