代码与JS中3个元素的高度相匹配，这是正确的吗？ [英] Code to match the height of the 3 elements in JS, is this correct?

查看：104 发布时间：2019/5/25 16:34:23 javascript jquery html css

本文介绍了代码与JS中3个元素的高度相匹配，这是正确的吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想做什么

我试过使句子像if语句一样：

[比较3个元素的高度]

→当所有小于内容的高度时： / p>

拉伸到内容的完整高度。

（ justify-content：space-between ; 或保证金：自动; ）

→当它大于内容高度时：
$ b $bㅤ→当3个元素中， .middle 是最大的：

拉伸其他2个元素（ .left 和 .right ）到内容的全部高度。

ㅤ→除此之外：

比较 .middle 以外的2个元素的高度（ .left 和 .right ）并将所有（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）

  / *高度对齐低于此值。 * // * 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（）;

  / *内容从中间开始。 （有一个标记）* / html {font-size：62.5％;} body {font-size：1.5rem; -webkit-font-smoothing：antialiased; -moz-osx-font-smoothing：灰度;显示：flex;最大高度：100vh;白颜色; background-color：＃c6d2dd;}。title {font-size：1.4rem;} header {display：flex;位置：固定;证明内容：flex-end; align-items：center;宽度：100％; z-index：30; padding：2.1rem 4.7rem 6rem 3.5rem;} header ul {display：flex; align-items：center; flex-wrap：wrap;溢出：隐藏;宽度：100％; margin-bottom：-1px;} header li {font-size：1.5rem;身高：4.5rem; padding-left：.4rem;} header li：first-child {padding-left：1.5rem;} header li：last-child {padding-right：.5rem;} header li>一个{text-decoration：none;显示：块;填充：1rem 2rem 1rem 3rem; margin-left：-1rem;身高：100％;颜色：#fff;大纲：无;过渡：背景颜色0.2s缓出，边框颜色0.2s缓出;位置：相对; border-radius：9px 5px 0 0;溢出：隐藏;位置：相对; z-index：5;} header li> a：悬停{过渡：背景颜色0.3s缓入，边框颜色0.3s缓入; 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）;过渡：背景颜色0.3s轻松，边框颜色0.3s轻松; box-shadow：-2px 2px 2px rgba（0,0,0,0.2）;} header li> a :: before {content：'';位置：绝对; z-index：-1;顶部：0;左：0;底部：0;右：0;过渡：背景色0.3s轻松;变换：倾斜（-15deg）;变换起源：右下角; 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;保证金：0 0 -4px -1px;}。logo {margin-right：auto;}。mb {position：relative; padding-left：4.1rem;}。mb a {display：block;身高：20px;}。mail {display：inline-block;}。balloon {display：none;位置：绝对; padding-top：2.5rem;右：-1.5rem;}。mb a：hover + .balloon {display：inline-block;} / * ------------------------- ---- *内容（来自此）* ---------------------------- * /.wrap {padding：6.9rem 1rem 0 1rem;宽度：100％;身高：100％;} #content {position：relative;宽度：100％;高度：计算（100％ -  7.9rem）;背景：＃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;网格行间隙：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％;身高：50％;}图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;填充：0;宽度：19.3rem;身高：20.2438rem;}。生活> .data span {position：absolute;填充：0;底部：30％;右：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）;涟漪{position：absolute;填充：0;底部：43％;左：44％; background-color：#fff;宽度：1rem;身高：1rem; border-radius：50％;动画：涟漪1.5s线性无限;}

 < link href =https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css =stylesheet/><！ - 内容从下面开始。 （有标记） - >< header> < a href =class =logo> < img src =https://placehold.jp/0352ab/0352ab/68x41.pngalt =logowidth =68height =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 =>等< / 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.pngalt =mailwidth =29/> < / A> < img class =balloonsrc =https://placehold.jp/0352ab/0352ab/101x150.pngalt =balloonwidth =101/> < / div>< / header><！ - 来自此 - >< div class =wrap> < div id =content> < div class =swiper-container> < div class =swiper-wrapper> <！ - 第1页 - > < div class =swiper-slide> < div id =abme> < div class =left> < section class =name> < p class =title>あいあ< / p> < p class =data>あいあいあいあい< / p> < /节> < section class =spec> < p class =title>あいあい< / p> < p class =data>あいあいいあいあいあいあいあいあい< / p> < /节> < section class =skill> < p class =title>あいあ< / p> < ul class =data> < li class =tool> < figure class =Illustrator> < img class =metersrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.pngalt =advanced/> < img class =meter-tsrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.pngalt =Illustrator/> ; < figcaption> Illustrator和LT; / figcaption> < /数字> < figure class =Photoshop> < img class =metersrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png\"alt =intermediate/> < img class =meter-tsrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png\"alt =Photoshop/> ; < figcaption> Photoshop和LT; / figcaption> < /数字> < figure class =Indesign> < img class =metersrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.pngalt =elementary/> < img class =meter-tsrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.pngalt =Indesign/> ; < figcaption>排版< / figcaption> < /数字> < figure class =Vectorworks> < img class =metersrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png\"alt =intermediate/> < img class =meter-tsrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.pngalt =Vectorworks/> ; < figcaption>&的Vectorworks LT; / figcaption> < /数字> < figure class =Shade> < img class =metersrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png\"alt =intermediate/> < img class =meter-tsrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.pngalt =Shade/> ; < figcaption>色光< / figcaption> < /数字> < /锂> < li class =code> < figure class =HTML> < img class =metersrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.pngalt =elementary/> < img class =meter-tsrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png\"alt =HTML/> ; < figcaption> HTML< / figcaption> < /数字> < figure class =CSS> < img class =metersrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.pngalt =elementary/> < img class =meter-tsrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png\"alt =CSS/> ; < figcaption> CSS< / figcaption> < /数字> < figure class =Javascript> < img class =metersrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png\"alt =beginner/> < img class =meter-tsrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png\"alt =Javascript/> ; < figcaption>使用Javascript< / figcaption> < /数字> < figure class =PHP> < img class =metersrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png\"alt =beginner/> < img class =meter-tsrc =https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png\"alt =PHP/> ; < figcaption> PHP< / figcaption> < /数字> < /锂> < / UL> < /节> < section class =hobby> < p class =title>あいあ< / p> < p class =data>あいあいあいあいあいあいあいあいあいあいあいあいあ< / p> < /节> < / DIV> < div class =middle> < img class =aboutImagesrc =https://placehold.jp/0352ab/0352ab/411x479.pngalt =mewidth =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 class =live> < p class =title>あいあ< / p> < div class =data> < img src =https://placehold.jp/0352ab/0352ab/193x202.pngwidth =193/> < span class =data>あいあ< / span> < div class =ripple>< / div> < / DIV> < /节> < / DIV> < / DIV> < / DIV> <！ - 第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 class =Q> < p class =title>あいあいいあいあいあ< / p> < p class =data>< br>あいいいいいいいいいいいいいいいいいいいいいいいいいいいいああああああああああああああああああああああああああああああああああい< / p为H. < /节> < / DIV> < div class =middle> < img class =aboutImagesrc =https://placehold.jp/0352ab/0352ab/411x411.pngalt =这是什么？ width =411/> < / DIV> < div class =right> < section class =theme> < p class =title>ああい< / p> < p class =data>居合いあいあい< br> <峰; br>あいあいあいあいあいあいあいあああああああああああああああああああああああああああああああああああああああああああああああああああ< /节> < / DIV> < / DIV> < / DIV> <！ - 第3页 - > < div class =swiper-slide> < div id =abee> < div class =left> < section class =ee> < p class =title>あいあいあいあいあ< / p> < p class =data>あいあいあいあいあいあいあいいいあい< br>青々青々あい< br>青々ああああああああああああああああああああああああああああああああああああああああああああああ< / p为H. < /节> < / DIV> < div class =middle> < img class =aboutImagesrc =https://placehold.jp/0352ab/0352ab/411x76.pngalt =这是什么？ 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>

解决方案

您不需要javascript来实现您的需求。
让我们来看看你的条件：

 比较3个元素的高度
→全部小于内容的高度：
延伸到内容的完整高度。

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

 →当它大于内容高度时：
→当3个元素中，.middle是最大的：
将其他2个元素（.left和.right）拉伸到内容的完整高度。

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

 →除此之外：
比较.middle（.left和.right）以外的2个元素的高度和
将所有（3个元素）的高度调整为较大的高度。

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

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

你的问题最大的问题是摆脱与这个问题无关的所有代码。

  .wrap {width：100％;身高：100％;} #content {position：relative;宽度：100％;最小高度：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;网格行间隙：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％;身高：50％;}图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> <！ - 第1页 - > < div class =swiper-slide> < div id =abme> < div class =left> < section class =name> < p class =title>标题< / p> < p class =datacontentEditable>内容可编辑< / p> < /节> < / DIV> < div class =middle> < p>< img class =aboutImagesrc =https://placehold.jp/0352ab/0352ab/400x200.png\"alt =mewidth =411/>< / p> < p contentEditable>内容可编辑< / p> < / DIV> < div class =right> < section class =attributes> < p class =title>标题< / p> < p class =datacontentEditable>内容可编辑< / p> < /节> < / 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>

What I want to do

I tried to make the sentence like if statement:

[ Compare the height of the 3 elements ]
→ When all are smaller than the height of content:

Stretches to the full height of content.
(justify-content: space-between; or margin: auto;)

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

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

Btw, why I want to implement in JS, not CSS:

I already use flexbox.
But I use swiper and have a problem that ① the element of the previous slide jumps to the next slide when the browser width/height is changed & ② it can't get the correct height.
So I thought it was necessary to use JS in order to "specify" the slide height and have it read into the swiper.

My current code

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

Is this code able to express what I wrote in a sentence?

▼ Code only (The code snippet results do not look correct because the reset css is not done)

/* 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>

解决方案

You don't need javascript to achieve what you need. Let's take a look at your conditions:

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

Result 1: All 3 elements with the same height of the content.

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

Result 2: All 3 elements with the same height of the content.

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

Result 3: All 3 elements with the same height of the content. This one is a little tricky but remember that all elements are child of the content <div>

So as you can see you just need to set all elements to the same size as their parent div (content) and make sure that the content minimum height is equal to the window vh (vertical height). All of this can be achieved with simple CSS.

The greatest problem for your question is to get rid of all code that's not relevant to this issue.

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

这篇关于代码与JS中3个元素的高度相匹配，这是正确的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

代码与JS中3个元素的高度相匹配，这是正确的吗？ [英] Code to match the height of the 3 elements in JS, is this correct?

问题描述

我想做什么

顺便说一下，为什么我要在JS中实现，而不是CSS：

我当前的代码

What I want to do

Btw, why I want to implement in JS, not CSS:

My current code

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

代码与JS中3个元素的高度相匹配，这是正确的吗？ [英] Code to match the height of the 3 elements in JS, is this correct?

问题描述

我想做什么

顺便说一下，为什么我要在JS中实现，而不是CSS：

我当前的代码

What I want to do

Btw, why I want to implement in JS, not CSS:

My current code

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭