匹配JS中3个元素的高度的代码，这是正确的吗？

时间：2019-04-17 07:46:18

标签： javascript jquery html css

我想做什么

like this

我试图使句子类似于if语句：

[比较3个元素的高度]
→当所有内容均小于内容高度时：

  • 延伸到内容的全部高度。
    （justify-content: space-between;或margin: auto;）

→大于内容高度时：
ㅤ→在3个元素中，.middle最大：

  • 将其他两个元素（.left和.right）拉伸到整个内容高度。

ㅤ→除此之外：

  • 比较.middle（.left和.right）以外的2个元素的高度，并将所有（3个元素）的高度调整为较大的一个。

顺便说一句，为什么我要用JS实现而不是CSS：

我已经在使用flexbox。
但是我使用swiper并遇到一个问题：①当更改浏览器的宽度/高度时，上一张幻灯片的元素跳到下一张幻灯片；②无法获得正确的高度。
因此，我认为有必要使用JS来“指定”幻灯片高度并将其读入滑动器。

我当前的代码

FullscreenFiddle / JSFiddle

jQuery 

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

此代码是否可以表达我在句子中写的内容？

▼仅适用于代码（由于未完成重置CSS，代码段结果看起来不正确）

/* 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();
/* The content starts around the middle. (There is a mark) */
html {
  font-size: 62.5%;
}

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

.title {
  font-size: 1.4rem;
}

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;
}
header ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  width: 100%;
  margin-bottom: -1px;
}
header li {
  font-size: 1.5rem;
  height: 4.5rem;
  padding-left: .4rem;
}
header li:first-child {
  padding-left: 1.5rem;
}
header li:last-child {
  padding-right: .5rem;
}
header li > 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;
}
header li > a: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);
}
header li > a:hover::before {
  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;
  box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
}
header li > a::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: bottom right;
  border-radius: 5px 0 0 0;
}

.current a {
  border-right: 1px solid #fff;
  border-bottom-width: 0;
  pointer-events: none;
  margin-bottom: -3px;
}
.current a::before {
  border: 1px solid #fff;
  background-color: #9bacbb;
  margin: 0 0 -4px -1px;
}

.logo {
  margin-right: auto;
}

.mb {
  position: relative;
  padding-left: 4.1rem;
}
.mb a {
  display: block;
  height: 20px;
}

.mail {
  display: inline-block;
}

.balloon {
  display: none;
  position: absolute;
  padding-top: 2.5rem;
  right: -1.5rem;
}

.mb a:hover + .balloon {
  display: inline-block;
}

/* -----------------------------
 *     contents (from this)
 *----------------------------*/
.wrap {
  padding: 6.9rem 1rem 0 1rem;
  width: 100%;
  height: 100%;
}

#content {
  position: relative;
  width: 100%;
  height: calc(100% - 7.9rem);
  background: #9bacbb;
  border: 1px solid #fff;
  border-radius: 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem;
}

.swiper-container {
  height: 100%;
}

.swiper-wrapper {
  justify-content: space-between;
  min-height: 100%;
}

.swiper-slide {
  align-items: center;
  height: auto;
}

#abme, #abmm, #abee {
  display: flex;
}

.left, .middle, .right {
  display: flex;
}

.left, .right {
  flex-direction: column;
  margin: 5rem 0;
}

/*  left  */
.left {
  padding: 0 0 0 5.6rem;
  width: 33.5rem;
}

.data {
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
}

.skill li {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.skill li :last-child {
  margin-right: 0;
}

.code {
  margin-top: 1.7rem;
}

figure {
  display: grid;
  grid-template: 'meter' auto 'name' min-content / 4.4rem;
  grid-row-gap: 0.5rem;
  margin-right: .9rem;
  font-size: 1rem;
}
figure img {
  grid-area: meter;
  align-self: center;
  justify-self: center;
}
figure .meter {
  width: 100%;
}
figure .meter-t {
  width: 50%;
  height: 50%;
}
figure figcaption {
  justify-self: center;
  min-width: 0;
}

.hobby > .data {
  padding-bottom: 0;
}

/*  middle  */
.middle {
  width: 55.2rem;
  flex-grow: 1;
  text-align: center;
  line-height: 0;
  margin-left: 3rem;
  margin-right: 3rem;
}
.middle img {
  flex: 0 1 auto;
  margin: auto;
}

/*  right  */
.right {
  padding: 0 5.6rem 0 0;
  width: 31.1rem;
}

.attributes > p:last-child {
  padding-top: 0;
}

.live > .data {
  position: relative;
  padding: 0;
  width: 19.3rem;
  height: 20.2438rem;
}
.live > .data span {
  position: absolute;
  padding: 0;
  bottom: 30%;
  right: 7%;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0.2), 0 0 0 1.5rem rgba(255, 255, 255, 0.2), 0 0 0 3.5rem rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1.5rem rgba(255, 255, 255, 0.2), 0 0 0 3.5rem rgba(255, 255, 255, 0.2), 0 0 0 8rem rgba(255, 255, 255, 0);
  }
}
.ripple {
  position: absolute;
  padding: 0;
  bottom: 43%;
  left: 44%;
  background-color: #fff;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  animation: ripple 1.5s linear infinite;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>

<!-- 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" />
                      <figcaption>Illustrator</figcaption>
                    </figure>
                    <figure class="Photoshop">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png" alt="Photoshop" />
                      <figcaption>Photoshop</figcaption>
                    </figure>
                    <figure class="Indesign">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png" alt="Indesign" />
                      <figcaption>Indesign</figcaption>
                    </figure>
                    <figure class="Vectorworks">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png" alt="Vectorworks" />
                      <figcaption>Vectorworks</figcaption>
                    </figure>
                    <figure class="Shade">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png" alt="Shade" />
                      <figcaption>Shade</figcaption>
                    </figure>
                  </li>
                  <li class="code">
                    <figure class="HTML">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png" alt="HTML" />
                      <figcaption>HTML</figcaption>
                    </figure>
                    <figure class="CSS">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png" alt="CSS" />
                      <figcaption>CSS</figcaption>
                    </figure>
                    <figure class="Javascript">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png" alt="Javascript" />
                      <figcaption>Javascript</figcaption>
                    </figure>
                    <figure class="PHP">
                      <img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
                      <img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png" alt="PHP" />
                      <figcaption>PHP</figcaption>
                    </figure>
                  </li>
                </ul>
              </section>
              <section class="hobby">
                <p class="title">あいあ</p>
                <p class="data">あいあいあいあいあいあいあいあいあいあいあいあいあ</p>
              </section>
            </div>

            <div class="middle">
              <img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/411x479.png" alt="me" width="411" />
            </div>

            <div class="right">
              <section class="attributes">
                <p class="title">あいあいいあ</p>
                <p class="data">あいあいあいあい</p>
                <p class="data">ああいいあいあいあいあ<br> 青々青々青々ああいあいあいあいあ
                  <br> あいあいあい居合いあいあいあいあい
                  <br> あいあいいあいあい
                  <br>
                  <br> あいあいあいあいあいあいああい
                  <br> あいあいあいあいあいあいあいあいあい
                </p>
              </section>
              <section class="live">
                <p class="title">あいあ</p>
                <div class="data">
                  <img src="https://placehold.jp/0352ab/0352ab/193x202.png" width="193" />
                  <span class="data">あいあ</span>
                  <div class="ripple"></div>
                </div>
              </section>
            </div>

          </div>
        </div>


        <!-- page 2 -->
        <div class="swiper-slide">
          <div id="abmm">
            <div class="left">
              <section class="mm">
                <p class="title">あいあい</p>
                <p class="data">青々青々あいあいあいあ<br> あいあいあいあいあ
                  <br>
                  <br> あい居合いあいあいいいいいいいいいいいいいいいいいいいいいいいいいいいいああああああ
                </p>
              </section>
              <section class="Q">
                <p class="title">あいあいいあいあいあ</p>
                <p class="data"><br> あいいいいいいいいいいいいいいいいいいいいいいいいいいいいああああああああああああああああああああああああああああああああああい
                </p>
              </section>
            </div>

            <div class="middle">
              <img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/411x411.png" alt="What's that?" width="411" />
            </div>

            <div class="right">
              <section class="theme">
                <p class="title">ああい</p>
                <p class="data">居合いあいあい<br>
                  <br> あいあいあいあいあいあいあいああああああああああああああああああああああああああ
                </p>
              </section>
            </div>

          </div>
        </div>


        <!-- page 3 -->
        <div class="swiper-slide">
          <div id="abee">
            <div class="left">
              <section class="ee">
                <p class="title">あいあいあいあいあ</p>
                <p class="data">あいあいあいあいあいあいあいいいあい<br> 青々青々あい
                  <br> 青々ああああああああああああああああああああああああああああああああああああああああああああああ
                </p>
              </section>
            </div>

            <div class="middle">
              <img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/411x76.png" alt="What's this?" width="411" />
            </div>

            <div class="right"></div>

          </div>
        </div>

      </div>
      <!-- /swiper-wrapper -->
    </div>
    <!-- /swiper-container -->
  </div>
  <!-- /content -->
</div>
<!-- /wrap -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

2 个答案:

答案 0 :(得分：0)

您尝试使用matchHeight脚本吗？ https://github.com/liabru/jquery-match-height

您可以执行以下操作：

<div data-mh="myheight"></>
<div data-mh="myheight"></>
<div data-mh="myheight"></>

或在JS文件中

$(function() {
    $('.item').matchHeight(options);
});

答案 1 :(得分：0)

您不需要javascript即可实现所需的功能。 让我们看看您的情况：

Compare the height of the 3 elements
→ When all are smaller than the height of content:
  Stretches to the full height of content.

结果1 ：所有3个元素的内容高度相同。

 → When it's greater than content height:
   → When of the 3 elements, .middle is the largest:
     Stretch the other 2 elements (.left and.right) to the full height of content.

结果2 ：所有3个元素的内容高度相同。

→ Other than that:
  Compare the heights of 2 elements other than .middle (.left and .right) and 
  adjust the height of all (3 elements) to the larger one.

结果3 ：所有3个元素的内容高度相同。这有点棘手，但请记住，所有元素都是content <div>

的子元素

因此您可以看到，只需将所有元素的大小设置为其父div（内容）的大小，并确保内容的最小高度等于窗口vh（垂直高度）。所有这些都可以通过简单的CSS来实现。

您遇到的最大问题是，删除所有与此问题无关的代码。

.wrap {
  width: 100%;
  height: 100%;
}

#content {
  position: relative;
  width: 100%;
  min-height: 100vh;
  border-radius: 5px;
}

.swiper-container, 
.swiper-wrapper,
.swiper-slide {
  min-height: 100vh;
}

.swiper-wrapper {
  justify-content: space-between;
}

.swiper-slide {
  align-items: center;
}

#abme,
#abmm,
#abee {
  min-height: 100vh;
  display: flex;
}
.middle,
.left,
.right {
  border: 1px solid red;
  margin: 1rem 0;
}

.left,
.right {
  display: flex;
  flex-direction: column;
}

/*  left  */

.left {
  padding: 0 0 0 0.6rem;
  width: 33.5rem;
}

.data {
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
}

.skill li {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.skill li:last-child {
  margin-right: 0;
}

.code {
  margin-top: 1.7rem;
}
figure {
  display: grid;
  grid-template: 'meter' auto 'name' min-content / 4.4rem;
  grid-row-gap: 0.5rem;
  margin-right: .9rem;
  font-size: 1rem;
}
figure img {
  grid-area: meter;
  align-self: center;
  justify-self: center;
}
figure .meter {
  width: 100%;
}
figure .meter-t {
  width: 50%;
  height: 50%;
}
figure figcaption {
  justify-self: center;
  min-width: 0;
}
.hobby>.data {
  padding-bottom: 0;
}

/*  middle  */
.middle {
  width: 55.2rem;
  flex-grow: 1;
  text-align: center;
  margin-left: 1rem;
  margin-right: 1rem;
}
.middle img {
  flex: 0 1 auto;
  margin: auto;
}
.middle p {
  float: none
}

/*  right  */
.right {
  padding: 0 0.6rem 0 0;
  width: 31.1rem;
}
.attributes>p:last-child {
  padding-top: 0;
}
<!-- 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">Title</p>
                <p class="data" contentEditable>Content editable</p>
              </section>
            </div>

            <div class="middle">
              <p><img class="aboutImage" src="https://placehold.jp/0352ab/0352ab/400x200.png" alt="me" width="411" /></p>
              <p contentEditable>Content editable</p>
            </div>

            <div class="right">
              <section class="attributes">
                <p class="title">Title</p>
                <p class="data" contentEditable>Content editable</p>
              </section>
            </div>

          </div>
        </div>
        <!-- /page1 -->


      </div>
      <!-- /swiper-wrapper -->
    </div>
    <!-- /swiper-container -->
  </div>
  <!-- /content -->
</div>
<!-- /wrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

相关问题
最新问题