登录页面PC端无滚动但移动端出现滚动的解决求助

云原生阿岚

2026-7-14

登录页面移动端滚动条问题解决方法

开发的登录页面在PC端无法滚动符合需求，但移动端出现滚动条（截图显示页面超出视口范围），尝试过相关方案无效，首次开发HTML，原代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Enter your login and password</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
      body,td { font-family: Arial; color: #666666; font-size: 1.00em; font-weight: normal; font-style: normal; }
      body { text-align:center; background-color: transparent; }
    </style>
    </head>
    <body>
<!-- 1357 -->
<!--form-start-->
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 600px; background-color: #FFFFFF; border: 1px solid #3A3A3A; border-radius: 5px; box-shadow: 0px 0px 8px #3A3A3A; margin: 50px auto auto;" id="ap_form_box">
<div style="background: #3A3A3A; border-radius: 5px 5px 0px 0px; padding: 15px 25px; position: relative"><span style="font-family: Arial; color: #FFFFFF; font-size: 1.40em; font-weight:bold; text-transform: none" id="ap_form_head">Enter your login and password</span></div>
<div style="background: #FFFFFF; padding: 15px" id="ap_style">
<style type="text/css" scoped>
    #ap_style td { text-align:left; font-family: Arial; color: #666666; font-size: 1.00em; border: 0px; }
    #ap_style td a { color: #666666; }
    #ap_style input,select { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; box-sizing: border-box; padding: 5px; }
    #ap_style input[type="text"], input[type="password"], input[type="email"], input[type="number"], select { width: 100%; background-color: #FFFFFF; }
    #ap_style input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #3A3A3A; background: buttonface; float: right; text-align:right; margin-top: 10px; margin-left:7px;}
    #ap_style input[type="checkbox"], input[type="radio"] { height: 1.00em; width: 1.00em; }
    #ap_style table.center { margin-left:auto; margin-right:auto; border: 0px; }
    #ap_style .error { font-family: Arial; color: #FF3333; font-size: 1.00em; padding-bottom:10px; }
    #ap_style .error_note { display: block; font-family: Arial; color: #FF3333; font-size: 0.85em; padding-top:3px; }
    #ap_style .error_box { border: 1px solid #FF3333; }
    .ap_footer { width:100% text-align: center; font-size:smaller; background: #3A3A3A; color: #FFFFFF } .ap_footer a { color: #FFFFFF; font-style: italic; }
    * { target-new: tab ! important }
</style>

<form method="post" action="https://www.authpro.com/auth/nilsie12/" name="aform" >
<input type="hidden" name="action" value="login">
<input type="hidden" name="user" value="nilsie12">
<input type="hidden" name="hide" value="">
<table id='ap_table_login' class='center'>
<tr style='display:none' id='ap_form_err'><td colspan='2' id='ap_form_errmes' class='error'>You have entered incorrect login or password.<br> Please try again.<br><br></td></tr>
<tr style='display:none'   id='ap_form_inf'><td colspan='2' id='ap_form_infmes'></td></tr>
<tr class='ap_form_inp'><td>Username:</td><td><input type="text" name="login" value="" autocorrect="off" autocapitalize="off" autocomplete="username"></td></tr>
<tr class='ap_form_inp'><td>Password:</td><td><input type="password" name="password" autocomplete="current-password"></td></tr>
<tr><td>&nbsp;</td><td align='left'><input type='checkbox' name='remember' value='1'> Remember me</td></tr>
<tr id='ap_form_isb'><td>&nbsp;</td><td><input type="submit" id='ap_form_btn' value="Enter"></td></tr>
<tr><td colspan=2>&nbsp;</td></tr>
<tr><td colspan='2' id='ap_form_lostmes'><a href="https://www.authpro.com/auth/nilsie12/?action=lost">Forgot your username or password?</a></td></tr>
</table>
</form>
<script type="text/javascript" src="https://www.authpro.com/js/aform.js"></script>
    
</div></div></div>

</html>

问题原因

移动端视口设置不完整、html/body未限制高度与溢出、容器固定margin导致内容超出视口高度，是出现滚动条的核心原因。

解决方案

优化视口配置：补充视口属性，锁定视口宽度并禁止用户缩放，避免布局偏移
限制页面滚动：设置html和body占满视口高度，隐藏溢出内容
适配居中布局：改用flex布局实现登录框垂直居中，替代固定margin，适配不同屏幕

修改后的完整代码

<!DOCTYPE html>
<html>
<head>
<title>Enter your login and password</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
      html, body { 
        height: 100%; 
        margin: 0; 
        padding: 0; 
        overflow: hidden; 
        display: flex;
        align-items: center;
        justify-content: center;
      }
      body,td { font-family: Arial; color: #666666; font-size: 1.00em; font-weight: normal; font-style: normal; }
      body { text-align:center; background-color: transparent; }
    </style>
    </head>
    <body>
<!-- 1357 -->
<!--form-start-->
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 600px; background-color: #FFFFFF; border: 1px solid #3A3A3A; border-radius: 5px; box-shadow: 0px 0px 8px #3A3A3A; margin: auto;" id="ap_form_box">
<div style="background: #3A3A3A; border-radius: 5px 5px 0px 0px; padding: 15px 25px; position: relative"><span style="font-family: Arial; color: #FFFFFF; font-size: 1.40em; font-weight:bold; text-transform: none" id="ap_form_head">Enter your login and password</span></div>
<div style="background: #FFFFFF; padding: 15px" id="ap_style">
<style type="text/css" scoped>
    #ap_style td { text-align:left; font-family: Arial; color: #666666; font-size: 1.00em; border: 0px; }
    #ap_style td a { color: #666666; }
    #ap_style input,select { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; box-sizing: border-box; padding: 5px; }
    #ap_style input[type="text"], input[type="password"], input[type="email"], input[type="number"], select { width: 100%; background-color: #FFFFFF; }
    #ap_style input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #3A3A3A; background: buttonface; float: right; text-align:right; margin-top: 10px; margin-left:7px;}
    #ap_style input[type="checkbox"], input[type="radio"] { height: 1.00em; width: 1.00em; }
    #ap_style table.center { margin-left:auto; margin-right:auto; border: 0px; }
    #ap_style .error { font-family: Arial; color: #FF3333; font-size: 1.00em; padding-bottom:10px; }
    #ap_style .error_note { display: block; font-family: Arial; color: #FF3333; font-size: 0.85em; padding-top:3px; }
    #ap_style .error_box { border: 1px solid #FF3333; }
    .ap_footer { width:100% text-align: center; font-size:smaller; background: #3A3A3A; color: #FFFFFF } .ap_footer a { color: #FFFFFF; font-style: italic; }
    * { target-new: tab ! important }
</style>

<form method="post" action="https://www.authpro.com/auth/nilsie12/" name="aform" >
<input type="hidden" name="action" value="login">
<input type="hidden" name="user" value="nilsie12">
<input type="hidden" name="hide" value="">
<table id='ap_table_login' class='center'>
<tr style='display:none' id='ap_form_err'><td colspan='2' id='ap_form_errmes' class='error'>You have entered incorrect login or password.<br> Please try again.<br><br></td></tr>
<tr style='display:none'   id='ap_form_inf'><td colspan='2' id='ap_form_infmes'></td></tr>
<tr class='ap_form_inp'><td>Username:</td><td><input type="text" name="login" value="" autocorrect="off" autocapitalize="off" autocomplete="username"></td></tr>
<tr class='ap_form_inp'><td>Password:</td><td><input type="password" name="password" autocomplete="current-password"></td></tr>
<tr><td>&nbsp;</td><td align='left'><input type='checkbox' name='remember' value='1'> Remember me</td></tr>
<tr id='ap_form_isb'><td>&nbsp;</td><td><input type="submit" id='ap_form_btn' value="Enter"></td></tr>
<tr><td colspan=2>&nbsp;</td></tr>
<tr><td colspan='2' id='ap_form_lostmes'><a href="https://www.authpro.com/auth/nilsie12/?action=lost">Forgot your username or password?</a></td></tr>
</table>
</form>
<script type="text/javascript" src="https://www.authpro.com/js/aform.js"></script>
    
</div></div></div>

</html>

修改说明

视口标签添加maximum-scale=1.0, user-scalable=no，防止用户缩放导致布局错乱
html和body设置height:100%占满视口，overflow:hidden禁止滚动，通过flex布局让登录框自动居中，无需依赖固定margin-top
登录容器的margin:50px auto auto改为margin:auto，适配不同屏幕高度，避免内容溢出

内容的提问来源于stack exchange，提问作者Steven

登录页面PC端无滚动但移动端出现滚动的解决求助

问题原因 #

解决方案 #

修改后的完整代码 #

修改说明 #

问题原因

解决方案

修改后的完整代码

修改说明