Question

如果截面的正常高度（由内容定义的高度）小于视口高度，我正在寻找一种方法将某些部分的高度设置为100vh。

出于这个原因，我使用以下代码：

$(function() {

  var windowWidth = $(window).width();
  var windowHeight = $(window).height();

  $('section').each(function (index, value) {

    console.log($(this).attr('id') + ': ' + $(this).outerHeight());

    if ( windowWidth > windowHeight && windowHeight > $(this).outerHeight()) {
      $(this).addClass("total");
    }

    else {
      $(this).removeClass("total");
    }

  });

});

控制台日志说我的一个部分的高度为880像素，而它的真实度为906像素。出于这个原因，即使显示器太小而导致设计糟糕，也会添加该类...

我认为我知道为什么要返回高度，但我不知道如何才能正确...

我们讨论的部分包含由this插件设置动画的圆形进度条。所以你可以说，圈子还没有加载，但它们是！我曾经在定义圆之前定义了这个函数，然后控制台日志中的高度正好是圆的高度比现在小。所以26 px的差异必然是由别的东西造成的。

如果我在浏览器控制台中输入$('#sectionID').outerHeight()，则会返回正确的高度，因此看起来，当每个函数运行时，某些元素没有被加载。但是该功能在文档就绪功能中，所以情况不应该......

有人有想法吗？

<小时/> 圈子代码

var size = "130";

var progress1 = $('.progress1'),
    inited_progress1 = false;

progress1.circleProgress({
  value: 0,
  size: size,
  lineCap: "round",
  fill: {
    gradient: ["#00C853", "#00E676"]
  }
});

progress1.appear(
  { force_process: true }
);

progress1.on('appear', function() {
  if (!inited_progress1) {
    designer.circleProgress({
      value: 0.65,
      size: size,
      lineCap: "round",
      fill: {
        gradient: ["#7CB342", "#689F38"]
      }
    });

    inited_progress1 = true;
  }
});

其中有八个。在普通屏幕上，它们显示为两行。

解决

感谢zsawaf的想法，我可以在不使用JavaScript的情况下解决问题。

这是SCSS / CSS代码：

section {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (orientation: landscape) {
  section {
    min-height: 100vh;
  }
}

获取元素的高度 - jQuery

解决

0 个答案: