height alignment

by __R2D2

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<!-- The content starts a little below. (There is a mark) -->
<header>
  <a href="" class="logo">
      <img src="https://placehold.jp/0352ab/0352ab/68x41.png" alt="logo" width="68" height="41.125" />
    </a>
  <nav>
    <ul>
      <li class="ALL"><a href="">ALL</a></li>
      <li class="MONO"><a href="">MONO</a></li>
      <li class="KOTO"><a href="">KOTO</a></li>
      <li class="etc"><a href="">etc.</a></li>
      <li class="current"><a href="">ABOUT</a></li>
    </ul>
  </nav>
  <div class="mb">
    <a href="">
        <img src="https://placehold.jp/0352ab/0352ab/29x20.png" alt="mail" width="29" />
      </a>
    <img class="balloon" src="https://placehold.jp/0352ab/0352ab/101x150.png" alt="balloon" width="101" />
  </div>
</header>

<!-- from this -->
<div class="wrap">
  <div id="content">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- page 1 -->
        <div class="swiper-slide">
          <div id="abme">
            <div class="left">
              <section class="name">
                <p class="title">あいあ</p>
                <p class="data">あいあいあいあい</p>
              </section>
              <section class="spec">
                <p class="title">あいあい</p>
                <p class="data">あいあいいあいあいあいあいあいあい</p>
              </section>
              <section class="skill">
                <p class="title">あいあ</p>
                <ul class="data">
                  <li class="tool">
                    <figure class="Illustrator">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png" alt="advanced" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png" alt="Illustrator"...

SCSS

/* The content starts around the middle. (There is a mark) */
html {
  font-size: 62.5%;
}

$back-color: #c6d2dd;
$hud-back: #9bacbb;
body {
  font-size: 1.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  max-height: 100vh;
  color: white;
  background-color: $back-color;
}

.title {
  font-size: 1.4rem;
}

@mixin ghost {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.4);
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
}

header {
  display: flex;
  position: fixed;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  z-index: 30;
  padding: 2.1rem 4.7rem 6rem 3.5rem;
  ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    width: 100%;
    margin-bottom: -1px;
  }
  li {
    font-size: 1.5rem;
    height: 4.5rem;
    padding-left: .4rem;
    &:first-child {
      padding-left: 1.5rem;
    }
    &:last-child {
      padding-right: .5rem;
    }
    > a {
      text-decoration: none;
      display: block;
      padding: 1rem 2rem 1rem 3rem;
      margin-left: -1rem;
      height: 100%;
      color: #fff;
      outline: none;
      transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
      position: relative;
      border-radius: 9px 5px 0 0;
      overflow: hidden;
      position: relative;
      z-index: 5;
      &:hover {
        transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
      }
      &:hover::before {
        @include ghost;
        box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
      }
      &::before {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        transition: background-color 0.3s ease-in;
        transform: skew(-15deg);
        transform-origin:...

JavaScript

/* The height alignment is below this. */
/* swiper */
var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: 'true',
  },
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    forceToAxis: true,
    invert: true,
  },
  renderBullet: function(index, className) {
    return '<span class="' + className + '">' + (index + 1) + '</span>';
  },
});

console.log(mySwiper.height);


/* height alignment */
function maxHeight() {
  var maxh = 0;
  var conh = 'calc(100vh - 79px)';
  $(".left, .middle, .right").each(function() {
    if ($(this).height() <= conh) {
      $(".left, .right").css('justify-content', 'space-between');
      $(".middle").css('height', '100%');
    } else {
      if ($(".middle").height() > $(".left, .right").height()) {
        $(".left, .right").css({
          'height': 'calc(' + conh + ' - 100px)',
          'justify-content': 'space-between'
        });
        $(".middle").css('height', conh);
      } else {
        maxh = $(".left, .right").height();
        $(".left, .middle, .right").height(maxh);
      }
    }
  });
}

mySwiper.height = maxHeight();