如何修复这个使用绝对 position 的选项卡布局？

Question

I know how absolute position works but in this case, it is spoiling the layout. Sure, I can use the min-height for every screen size using media queries but that's not a full-proof solution as the client could upload any image size.

The content from below overlaps the tab which is using absolute position. I'm using absolute-position so that the animation works. is there a possibility to add a jQuery code to detect the image height and auto apply it or is there a better solution? How do I solve this problem?

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

You don't want min-height , because you don't know the height at each responsive level (on mobile devices it might be lower). What you want is for the .active tab to set the height of the tabs. To do that, you need to include it in document flow, by setting its position back to static .

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

This also requires you to add a top: 0 to the other ones. Without it, the tabs after the currently active ones will not be positioned at the top of tabs container, but at the bottom of the active one.

Your updated fiddle: https://jsfiddle.net/websiter/grkn493p/

---

Note: if you also want the change in container height to be smooth, you have to use height on the container and transition it each time a tab changes, by reading it from the height of the current tab.

Set the transition:

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

Get the active tab's height when the tab changes and set it on the container:

$(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)

    })
  });
});

Updated fiddle: https://jsfiddle.net/websiter/uz0fkrj2/

Do note the updated fiddle was taken a step further. I noticed the set height on container doesn't get updated when the page is resized. Which poses two distinct problems:

• a) the function to update the height needs to change into target agnostic (because we don't know the target in the resize event). But that's easily fixable, as the target is the currently .active tab panel.
• b) window.resize is triggered way too often and setting the height of each tab-container in the page so often will result in performance issues (the page animations will stagger). To avoid that, I throttle -ed the update function (not allow it to run more often than x milliseconds). I imported lodash and used its _.throttle method - there is a jQuery equivalent but I'm not sure about its syntax - never used it.