Javascript div没有滚动条
我已经为我的页面创建了一个切换登录/注册模板 但是,一旦单击Register,就会发现某些元素不可见 这是你的电话号码 这是完整的代码Javascript div没有滚动条,javascript,html,css,Javascript,Html,Css,我已经为我的页面创建了一个切换登录/注册模板 但是,一旦单击Register,就会发现某些元素不可见 这是你的电话号码 这是完整的代码 HTML <div id="container"> <button id="bt1" type="button"> Login </button> <button id="bt2" type="button">Register </button> <br> <div id="logi
HTML
<div id="container">
<button id="bt1" type="button"> Login
</button>
<button id="bt2" type="button">Register
</button>
<br>
<div id="login">
<table>
<form name="login" action="#" method="post" enctype="multipart/form-data" onsubmit="return validateLogin();">
<tr>
<td>
E-Mail
</td>
<td>
<input type="text" name="email">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" name="pass">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="s_login_submit" value="Login">
</td>
</tr>
</form>
</table>
</div>
<div id="register">
<form name="register" method="post" action="register_exec.php" enctype="multipart/form-data" onsubmit="return validateForm();">
<table>
<tr>
<td>Salutation
</td>
<td>
<select name="Salutation">
<option value="Ms">Ms</option>
<option value="Mrs">Mrs</option>
<option value="Mr">Mr</option>
<option value="Dr">Dr</option>
</select>
</td>
</tr>
<tr>
<td>
First Name
</td>
<td>
<input type="text" name="F_Name">
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
<input type="text" name="L_Name">
</td>
</tr>
<tr>
<td>
E-Mail
</td>
<td>
<input type="text" name="email">
</td>
</tr>
<tr>
<td>
Password(Min 6 characters)
</td>
<td>
<input type="password" name="pass">
</td>
</tr>
<tr>
<td>
Phone Number(10 digit)
</td>
<td>
<input type="text" name="P_Number">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
High School Name:
</td>
<td>
<input type="text" name="High_School">
</td>
</tr>
<tr>
<td>
High School Percentage:
</td>
<td>
<input type="text" name="HS_Percentage">
</td>
</tr>
<tr>
<td>
Intermediate School Name:
</td>
<td>
<input type="text" name="Intermediate">
</td>
</tr>
<tr>
<td>
Intermediate Percentage
</td>
<td>
<input type="text" name="I_Percentage">
</td>
</tr>
<tr>
<td>
Graduation College Name:
</td>
<td>
<input type="text" name="Graduation">
</td>
</tr>
<tr>
<td>
Graduation Score:
</td>
<td>
<input type="text" name="G_Score">
</td>
</tr>
<tr>
<td>
Graduation Year:
</td>
<td>
<input type="text" name="G_Year">
</td>
</tr>
<tr>
<td>
PG College Name:
</td>
<td>
<input type="text" name="PostGraduation">
</td>
</tr>
<tr>
<td>
PG Score:
</td>
<td>
<input type="text" name="PG_Score">
</td>
</tr>
<tr>
<td>
PG Year
</td>
<td>
<input type="text" name="PG_Year">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="Go" value="Go">
</td>
</tr>
</table>
</form>
</div>
</div>
CSS
#login
{
}
#register
{
display:none;
}
#container{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input, select {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
table{
background: rgba(0,0,0,0.3);
position: relative
padding top:50px
margin-top: 1%;
overflow-y: visible;}
select {
width: auto;
}
input:hover, select:hover,
input:focus, select:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
input[type=submit] {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
button
{
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Javascript
function swap(login, register) {
document.getElementById(login).style.display = 'block';
document.getElementById(register).style.display = 'none';
}
document.getElementById('bt1').addEventListener('click',function(e){
swap('login','register');
});
document.getElementById('bt2').addEventListener('click',function(e){
swap('register','login');
});
function validateForm() {
var f_name = document.forms["register"]["F_Name"].value;
if(f_name == null || f_name == "")
{
alert("First Name is required");
return false;
}
var l_name = document.forms["register"]["L_Name"].value;
if(l_name == null || l_name == "")
{
alert("Last Name is required");
return false;
}
var email = document.forms["register"]["email"].value;
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=email.length) {
alert("Not a valid e-mail address");
return false;
}
var pass = document.forms["register"]["pass"].value;
if(pass == null || pass == "")
{
alert("Password is required");
return false;
}
else if(pass.length<6)
{
alert("password too short");
return false;
}
var P_Number = document.forms["register"]["P_Number"].value;
if(P_Number == null || P_Number == "")
{
alert("Phone Number is required");
return false;
}
P_Number=P_Number.toString().length;
if(P_Number<10 || P_Number>10)
{
alert("Phone Number incorrect")
return false;
}
}
尝试使用以下命令更改容器样式:
#container {
position: fixed;
top: 50%;
left: 50%;
max-height: 100%;
overflow-y: auto;
transform: translate(-50%, -50%);
}
有什么问题吗?@TylerH单击register使结果窗口变小,您将无法滚动到完成form@TylerH当您单击register时,表单不完全可见,请注意登录/注册button@CAO我认为现在是时候了,你应该停止在html中使用表,而开始使用div,一个是我在1.5年后做web开发,另一个是我有一个疯狂的截止日期。如果我想要一个滚动条来显示整个页面,而不是div容器,该怎么办?。将其放入父分区??是的,将其放入父分区,使父分区的静态高度为100%,300px或其他值,使父分区溢出-y:auto,并使容器高度为auto