1

我创建了一个小脚本来使用 js 垂直居中表单。但是，它似乎不适用于 window.onresize，我不明白为什么。顺便说一句，它在 window.onload 上完美运行，如果我要求，window.onresize 会在调整大小时发出警报。这是我的代码：

var resetHeight = function(){

  var loginForm = document.querySelector('.login-form');
  var windowHeight = window.innerHeight;
  var topNavbarHeight = document.querySelector('.top-navbar').clientHeight;
  var loginFormHeight = loginForm.clientHeight;
  var footerHeight = document.querySelector('footer').clientHeight;
  var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90;
  var halfHeight = (windowHeight-totalHeights) / 2;

  loginForm.style.paddingTop = halfHeight + "px";
  loginForm.style.paddingBottom = halfHeight+ "px";      

};

window.onload = resetHeight;

window.onresize = resetHeight;
4

5 回答 5

1

这是我编写的（对我而言）有效的 jquery 解决方案。有一个普通的 javascript 答案会很棒。

var resetHeight = function(){
  var loginForm = $(".login-form");
  var loginFormHeight = loginForm.height();
  var windowHeight = $(window).height();
  var topNavbarHeight = $('.top-navbar').height();
  var footerHeight = $('footer').height();
  var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90;
  var halfHeight = (windowHeight-totalHeights) / 2;
  loginForm.css({
    "padding-top":halfHeight,
    "padding-bottom":halfHeight
  });

} 

  $( document ).ready(function(){
   resetHeight();   
   window.addEventListener('resize', resetHeight);     
  });
于 2017-02-05T23:25:54.773 回答
0

您可以尝试使用 jquery 来执行此操作，例如：

$(document).ready(function(){
  $( window ).resize(function() {
   var loginForm = document.querySelector('.login-form');
   var windowHeight = window.innerHeight;
   var topNavbarHeight = document.querySelector('.top-navbar').clientHeight;
   var loginFormHeight = loginForm.clientHeight;
   var footerHeight = document.querySelector('footer').clientHeight;
   var totalHeights = loginFormHeight + topNavbarHeight + footerHeight + 90;
   var halfHeight = (windowHeight-totalHeights) / 2;

   loginForm.style.paddingTop = halfHeight + "px";
   loginForm.style.paddingBottom = halfHeight+ "px";  
});

});
于 2017-02-05T20:17:00.700 回答
0

您是否尝试过在调整窗口大小时提醒您所需的值？您应该尝试一下 JQuery 解决方案：

window.addEventListener('resize', resetHeight);

另外，我会尝试在onresize="resetHeight()"您的 HTML 标记内使用事件侦听器。让我知道这个是否奏效！

于 2017-02-05T20:03:08.763 回答
0

像这样在body标签中加载调整大小动作

<body onresize="resetHeight()">
于 2017-02-05T20:05:15.190 回答
0

不是一个答案，而是一个建议，当您可以使用 CSS 时，为什么还要为此使用 javascript？它将表现得更好并支持更多的人。这是一个始终位于其容器中心的 div 的简单示例：

#centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: red;
  width: 100px;
  height: 100px;
}
<div id="centered">

</div>

于 2017-02-05T20:10:06.410 回答