Javascript setInterval（…）对视口高度的降低没有响应_Javascript_Jquery_Google Chrome_Caching_Resize

Javascript setInterval（…）对视口高度的降低没有响应

javascript jquery google-chrome caching

Javascript setInterval（…）对视口高度的降低没有响应,javascript,jquery,google-chrome,caching,resize,Javascript,Jquery,Google Chrome,Caching,Resize,场景我已经设置了三个简单的网页，它们的内容应该始终保持垂直和水平居中于浏览器的视口，尽管在页面刷新之间视口的大小发生了变化。我使用W3C.org的条目来获取水平和垂直居中的帮助。我正在Chrome和Safari开发工具的帮助下测试代码问题当我加载index.php页面时，页面内容最初应该居中。当我更改视口的宽度或水平值时，浏览器会通过不断地将页面内容水平重新居中来响应。当我增加视口的高度或垂直值时，浏览器也会做出响应，不断地垂直调整页面内容的中心位置——到目前为止还不错。但是，当我减小视口

场景

我已经设置了三个简单的网页，它们的内容应该始终保持垂直和水平居中于浏览器的视口，尽管在页面刷新之间视口的大小发生了变化。我使用W3C.org的条目来获取水平和垂直居中的帮助。我正在Chrome和Safari开发工具的帮助下测试代码

问题

当我加载index.php页面时，页面内容最初应该居中。当我更改视口的宽度或水平值时，浏览器会通过不断地将页面内容水平重新居中来响应。当我增加视口的高度或垂直值时，浏览器也会做出响应，不断地垂直调整页面内容的中心位置——到目前为止还不错。但是，当我减小视口的高度时，body元素的高度不会改变，页面内容保持在body元素高度值最大的最后一个垂直位置

视口的高度越小，页面及其内容的可滚动部分就越大（应该根本没有可滚动部分）。[但是，如果要刷新页面，您会发现页面内容在当前视口维度上重新居中。只有在不刷新页面，然后尝试降低视口高度时，才会出现问题。]再次增加视口高度时，页面内容保持不变，直到视口的高度值匹配并超过主体元素的高度值为止，此时浏览器通过不断地垂直重新居中页面内容来响应，这是它应该做的

直到现在，我还没有遇到过这样的问题，尽管之前我已经在多个场合实现过这种构造。在遇到这个问题之前，我对浏览器有不同的不满。浏览器没有反映对CSS所做的更改，此时我绕过了浏览器的缓存。我能够摆脱挫折感，但其后果可能与当前的问题有关

.js用于所有三个页面

更新的.js

$(function() {



var viewportWidth = $( window ).width();
var viewportHeight = $( window ).height();
$( "body" ).css({
    width: viewportWidth,
    height: viewportHeight
});

$( window ).resize(function() {

    viewportWidth = $( window ).width();
    viewportHeight = $( window ).height();
    $( "body" ).css({
        width: viewportWidth,
        height: viewportHeight
    });

});



});

原件.js

$(function() {



var viewportWidth = $( window ).width();
var viewportHeight = $( window ).height();

$( "body" ).css({
    width: viewportWidth,
    height: viewportHeight
});

setInterval(function() {

    viewportWidth = $( window ).width();
    viewportHeight = $( window ).height();

    $( "body" ).css({
        width: viewportWidth,
        height: viewportHeight
    });

}, 10);



});

index.php

<!DOCTYPE>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Home</title>
    <link href="css/laptop-index.css" rel="stylesheet">
</head>

<body>
    <div id="container">
        <div id="register"><a href="pages/register.php">Register</a></div>
        <div id="login"><a href="pages/login.php">Login</a></div>
    </div>

    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/jsindex.js"></script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Registration</title>
    <link href="../css/laptop-register.css" rel="stylesheet">
</head>

<body>
    <form action="$_SERVER[PHP_SELF]" id="form" method="post">
        <input name="my_firstname" placeholder="Your first name" type="text">
        <input name="my_lastname" placeholder="Your last name" type="text">
        <br>
        <input name="my_address" placeholder="Your street address" type="text">
        <input name="my_address" placeholder="Your street address continued" type="text">
        <input name="my_city" placeholder="Your city" type="text">
        <input name="my_state" placeholder="Your state" type="text">
        <input name="my_zip" placeholder="Your zip" type="text">
        <input name="my_country" placeholder="Your country" type="text">
        <br>
        <input name="my_phone" placeholder="Your phone number" type="tel">
        <input name="my_email" placeholder="Your email" type="text">
        <br>
        <input name="my_username" placeholder="Your username" type="text">
        <input name="my_password" placeholder="Your password" type="password">
        <br>
        <textarea cols="50" name="my_message" placeholder="Your message" rows="5" type="text"></textarea>
        <br>
        <input type="submit" value="register">
    </form>

    <div id="back_button"><a href="../index.php">Return to Home Page</a></div>

    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/register.js"></script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Login</title>
    <link href="../css/laptop-login.css" rel="stylesheet">
</head>

<body>
    <form action="$_SERVER[PHP_SELF]" id="form" method="post">
        <input name="my_username" placeholder="Your username" type="text">
        <input name="my_password" placeholder="Your password" type="password">
        <br>
        <input type="submit" value="login">
    </form>

    <div id="back_button"><a href="../index.php">Return to Home Page</a></div>

    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/login.js"></script>
</body>

</html>

register.php

<!DOCTYPE>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Home</title>
    <link href="css/laptop-index.css" rel="stylesheet">
</head>

<body>
    <div id="container">
        <div id="register"><a href="pages/register.php">Register</a></div>
        <div id="login"><a href="pages/login.php">Login</a></div>
    </div>

    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/jsindex.js"></script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Registration</title>
    <link href="../css/laptop-register.css" rel="stylesheet">
</head>

<body>
    <form action="$_SERVER[PHP_SELF]" id="form" method="post">
        <input name="my_firstname" placeholder="Your first name" type="text">
        <input name="my_lastname" placeholder="Your last name" type="text">
        <br>
        <input name="my_address" placeholder="Your street address" type="text">
        <input name="my_address" placeholder="Your street address continued" type="text">
        <input name="my_city" placeholder="Your city" type="text">
        <input name="my_state" placeholder="Your state" type="text">
        <input name="my_zip" placeholder="Your zip" type="text">
        <input name="my_country" placeholder="Your country" type="text">
        <br>
        <input name="my_phone" placeholder="Your phone number" type="tel">
        <input name="my_email" placeholder="Your email" type="text">
        <br>
        <input name="my_username" placeholder="Your username" type="text">
        <input name="my_password" placeholder="Your password" type="password">
        <br>
        <textarea cols="50" name="my_message" placeholder="Your message" rows="5" type="text"></textarea>
        <br>
        <input type="submit" value="register">
    </form>

    <div id="back_button"><a href="../index.php">Return to Home Page</a></div>

    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/register.js"></script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Interactive | Login</title>
    <link href="../css/laptop-login.css" rel="stylesheet">
</head>

<body>
    <form action="$_SERVER[PHP_SELF]" id="form" method="post">
        <input name="my_username" placeholder="Your username" type="text">
        <input name="my_password" placeholder="Your password" type="password">
        <br>
        <input type="submit" value="login">
    </form>

    <div id="back_button"><a href="../index.php">Return to Home Page</a></div>

    <script src="../js/jquery-3.2.1.js"></script>
    <script src="../js/login.js"></script>
</body>

</html>

你真的应该使用CSS，因为这正是CSS的作用。查看如何在CSS中居中

您可能还希望使用CSS中的“vh”和“vw”单元根据视口大小调整内容大小

你们都对了，我根本不需要任何JS。事实上，JS实际上是问题的根源。离开JS和改变CSS（如下）导致了其他奇怪的事情发生。我不知道为什么我认为我需要依靠它来持续水平和垂直居中，所以我完全放弃了它。在对它进行了一点修改之后，这是我可以处理的最小CSS：

body-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

以下所有内容似乎也适用于上述情况：

body { height: 100% }

你应该考虑将一个“Resith'”事件处理程序绑定到窗口来处理浏览器窗口的大小调整，而不是每10毫秒运行一个间隔，这是多余的。你能把你的样本转换成一个片段并提供你正在使用的CSS吗？我的第一个反应是，您根本不需要使用JavaScript进行任何计算。我已经更新了.js文件，以包含jQuery的.resize（）处理程序，而不是setInterval（）计时器，但我原来的问题仍然存在@TaplarI已经更新了.js文件以包含jQuery的.resize（）处理程序，而不是setInterval（）计时器，但我原来的问题仍然存在@我已经包括了.css文件@姆桑福德

html { height: 100% }

html { height: 100% }
body { height: 100% }

html { height: 100% }
body {
    height: 100%;
    position: relative
}