Question

好的，我正在创建一个登陆页面，我想要发生的事情是，页面被分成两半，并且任一侧滑出屏幕，主页面就会离开。我几乎拥有它，但右边正在做的是，只要窗口处于特定大小，它就会低于左侧。我不确定如何解决这个问题，我尝试的一切都不起作用，而且我无法在网上找到任何答案。谢谢你的帮助

CODE

＆＃13;

body,
html {
  min-width: 100%;
  min-height: 100%;
  margin: 0px;
  background-color: gray;
}
#landingDiv {
  min-width: 1100px;
  height: 100vh;
}
#lBanText {
  font-size: 50px;
}
#lBanText p {
  top: 0;
  bottom: 0;
  position: relative;
  margin: auto;
  margin-top: 2px;
}
.lBan {
  dispay: block;
  width: 100%;
  min-height: 60px;
  background-color: red;
  padding: 0px;
  postion: relative;
  float: left;
}
#leftHalf,
#rightHalf {
  min-width: 50%;
  position: relative;
  float: left;
  height: 100%;
  left: 0;
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>
            Name of Site
        </title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                
                window.addEventListener("keydown", checkKey);
                
                function checkKey(e) {
                    var key = e.keyCode;
                    //alert(key);
                    if(key === 79) {
                        $("#leftHalf").hide("slide", {direction: "left"}, 1000);
                        $("#rightHalf").hide("slide", {direction: "right"}, 1000);
                    }
                };
            });
        </script>
    </head>
    <body>
        <div id="landingDiv">
            <div id="leftHalf">
                <div id="lBanText" class="lBan">
                    <p>
                        Title of Website Here
                    </p>
                </div>
            </div>
            <div id="rightHalf">
                <div class="lBan">
                
                </div>
            </div>
        </div>
    </body>
</html>

＆＃13;

JQuery Sliding Div off of screen

0 个答案: