关于页面点击还原按钮页面内容错位

2012-09-19 01:37:22 367 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

微信打开h5页面键盘弹起后页面上滑，导致页面中的按钮功能区域错位最近在做个项目，其中有个页面是申请登录页面，在手机上测试的是用vscode的live-server，把地址链接发到微信上打开就出现问题了。点击按钮以外的区域也会触发这个按钮才有的事件。就因为这个老大叼了我一顿，说我布局有问题，委屈巴巴~~~好在通过百度找到了问题所在。看网上的解释就是因为当 input失去焦点，页面被顶起没有还原，按钮或者input还在原来的位置。所以就有以下的方法来处理 ... 阅读详情

我在做一个界面，但是在浏览器上显示的时候，最大化是显示正常的，但点击还原按钮的时候，右边的内容自动移到中间位置去了，而原本右边的位置却变空白了。求大神们解答，急急急！！！

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Logon.aspx.cs" Inherits="Web.Logon" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<link rel="stylesheet" type="text/css" href="Styles/Main.css"/>

    <title>LOGON</title>

    <style type="text/css">

        .sidebar

        {

            height: 375px;

            width: 180px;

        }

    </style>

</head>

<body id="body">

    <form id="form1" runat="server">   

    <div id="header1"><img alt="Columbia" id="Image" src="images/01.jpg" /></div>  

    <div id="container1">  

  <div id="mainContent1">

    <div id="sidebar1"><img alt="Why" class="sidebar" src="images/cipflyer.jpg" /></div>

    <div id="sidebar2">

     <img   alt="Log" src="images/0.jpg" />  

     <img  alt="Log" src="images/131U0G9354140-595A8.png" />

    <ul>      

    <li class="li1">UserID:</li>

    <li class="li2"> <asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> </li>       

    <li class="li1">Password:</li>

    <li class="li2"><asp:TextBox ID="txtPWD" runat="server"></asp:TextBox>         

    </li> 

     <li class="li3">

         <asp:Button ID="btnLogin" runat="server" Text="Login" />

         <asp:Button ID="btnCancel" runat="server" Text="Cancel" />

     </li>  

    </ul>

    </div>

    <div id="content1">Home

<div id="Pre"><pre style="height: 461px">                                 

   Columbia International Publishing (CIP), located in the US,

   is a leading organization that delivers high-quality original 

   research to the world.CIP provides a platform for readers, 

   authors, editors, and peer reviewers to promote scientific research.

   The CIP team consists of professors, scientists, engineers, enterprise

   founders,business management experts, and talent staff.

   International support provided to CIP by companies and universities

   guarantees rapid,barrier-free delivery of research.



   In order to promote scientific research, CIP is putting forward its 

   own definition of Open Access,which entails a great deal more than 

  “infinite readership,” as Open Access is commonly described.

   In order to guarantee the complete authority and editorial independency,

   CIP signs a contract with each voluntary editorial board member.

   For a better understanding of CIP, please read CIP’s mission,

   Why Open Access, the unique definition of CIP’s Open Access, 

   8 reasons to publish on CIP and 6 reasons to work with CIP. 



   All submitted manuscripts are subject to rigorous peer review. 

   Acceptance of a submission is solely based on recommendations by 

   voluntary editors and peer reviewers.If you are interested in being

   a CIP editor or peer reviewer, please contact us.All papers and books

   will be published online shortly after their acceptance. 

</pre></div></div>

  </div>

</div>  

  <div id="footer">

    <p>

        Copyright:<a href="#"> Columbia International Publishing LLC. </a>All rights reserved</p>

    <p>

        Address: 3610 Buttonwood Dr. Suite 200, Columbia MO 65201

    </p>

    <p>

        Telephone: 1-573-886-8964 Fax:573-886-8901 Email: uscip@uscip.org</p>

</div>

    </form>  

</body>

</html>

#container1 {margin:0 auto; width:1420px;}

#header1

{

    height: 100px;

    background: #FFFFFF;

    margin-bottom: 5px;

}

#mainContent1 { height:480px; margin-bottom:5px; width:1420px;}

#sidebar1 { float:left; width:191px; 

padding-top:70px; height:419px;  

background:#FFFFFF;

}

#sidebar2

{

    float: right;

    width: 343px;   

    height: 413px;

    padding-right:10px;  

}

#content1 { float:none; height:461px;

background:#FFFFFF;

    width:620px;

}