Question

我已经使用html和CSS创建了注册表。之前只有7个输入字段，由于我想要再增加2个输入字段，所以我又添加了2个文本框来输入用户名和密码。

只有七个文本框时，它向我显示了提交按钮。但是在我添加了其他文本框后，尽管我向下滚动，它也不会显示注册按钮

这里没有包含php代码，因为它没有任何问题

这是CSS代码：

@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */

body{
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: white;
	background-position: center;
    background-blend-mode: soft-light;
    font-family: sans-serif;
    
}

#form1
{
    overflow: scroll;
}

.regform
{
	
 	width: 500px;
    height: 880px;
    overflow-y:scroll;
    background:rgba(0,0,0,0.5);
    color: #fff;
	padding: 0px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-sizing: border-box; 
    padding: 70px 30px;
    
	
	
}

.regform p
{
	 margin: 0;
    padding: 0;
    font-weight: bold;
	
}

.regform input[type="text"],[type="datetime-local"] ,[type="date"],[type="Password"]{
	
	 width: 100%;
    margin-bottom: 20px;
	 border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
}

#regbt{
	
	width: 85%;
	position: fixed;
	border: none;
    outline: none;
	
    height: 40px;
    background: blue;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
	margin:9px 0;
	
}

#regbt:hover{
	
	 cursor: pointer;
    background: #ffc107;
    color: #000;
	
}

这是html代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style6.css" type="text/css">
<meta charset="utf-8">
<title>Registration </title>
</head>

<body>
<!-- regform -->
 <form id="form1" name="form1" method="POST">
  <div class="regform">
	 <p>
    <label for="textfield">Student ID:</label></p>
    <input type="text" name="stuid" class="textfield"  readonly><br><!-- Auto incremented in table-->

	  <p><label for="textfield">Student Name:</label></p>
    <input type="text" name="stuname" class="textfield" placeholder="Enter your full name" required><br>

	<p><label for="textfield">User Name:</label></p>
	    <input type="text" name="stu_uname" class="textfield" placeholder="Enter your username" required><br>


	<p><label for="textfield">Password:</label></p>
	    <input type="Password" name="stu_pass" class="textfield" placeholder="Enter your Password" required><br>


	  <p><label for="textfield">NIC or Passport No.:</label></p>
    <input type="text" name="stunic" class="textfield" placeholder="enter your NIC number or Passport number" required><br>

		 <p> <label for="textfield">Address:</label></p>
    <input type="text" name="stuaddress" class="textfield" placeholder="enter your address" required><br>	
	  <table width="200">
	    <tr>
	      <td><p>Gender:</p><label>
	       <input type="radio" name="Gender" value="radio" id="Gender_0" required>
	        Male</label></td>
        </tr>
	    <tr>
	      <td><label>
	        <input type="radio" name="Gender" value="radio" id="Gender_1" required>
	        Female</label></td>
        </tr>
    </table>
	  <br>
    
	<p><label> D.O.B:</label></p>
      <input type="date"  name="dob" required><br>

       <p> <label for="textfield">Registration Number:</label></p>
      <input type="text" name="sturegno" class="textfield" required ><br>
<!-- Auto incremented in the table-->


		<p><label>Registration Date:</label></p><input name="regdate" type="datetime-local" required><br>

		<input type="submit" name="regbt1" id="regbt" value="Register">
   </div>
	 
  </form>
	 

</body>
</html>

请忽略我在发布问题时犯的任何错误。

Answer 1

您正在为.regform设置固定的高度尺寸

更新如下：

.regform {
    width: 500px;
    height: 100%;
    [...]
}

@charset "utf-8";
/* CSS Document */
@charset "utf-8";
/* CSS Document */

body{
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: white;
	background-position: center;
    background-blend-mode: soft-light;
    font-family: sans-serif;
    
}

#form1
{
    overflow: scroll;
}

.regform
{
	
 	  width: 500px;
    height: 100%;
    overflow-y:scroll;
    background:rgba(0,0,0,0.5);
    color: #fff;
	padding: 0px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-sizing: border-box; 
    padding: 70px 30px;
    
	
	
}

.regform p
{
	 margin: 0;
    padding: 0;
    font-weight: bold;
	
}

.regform input[type="text"],[type="datetime-local"] ,[type="date"],[type="Password"]{
	
	 width: 100%;
    margin-bottom: 20px;
	 border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
}

#regbt{
	
	width: 85%;
	position: fixed;
	border: none;
    outline: none;
	
    height: 40px;
    background: blue;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
	margin:9px 0;
	
}

#regbt:hover{
	
	 cursor: pointer;
    background: #ffc107;
    color: #000;
	
}

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style6.css" type="text/css">
<meta charset="utf-8">
<title>Registration </title>
</head>

<body>
<!-- regform -->
 <form id="form1" name="form1" method="POST">
  <div class="regform">
	 <p>
    <label for="textfield">Student ID:</label></p>
    <input type="text" name="stuid" class="textfield"  readonly><br><!-- Auto incremented in table-->

	  <p><label for="textfield">Student Name:</label></p>
    <input type="text" name="stuname" class="textfield" placeholder="Enter your full name" required><br>

	<p><label for="textfield">User Name:</label></p>
	    <input type="text" name="stu_uname" class="textfield" placeholder="Enter your username" required><br>


	<p><label for="textfield">Password:</label></p>
	    <input type="Password" name="stu_pass" class="textfield" placeholder="Enter your Password" required><br>


	  <p><label for="textfield">NIC or Passport No.:</label></p>
    <input type="text" name="stunic" class="textfield" placeholder="enter your NIC number or Passport number" required><br>

		 <p> <label for="textfield">Address:</label></p>
    <input type="text" name="stuaddress" class="textfield" placeholder="enter your address" required><br>	
	  <table width="200">
	    <tr>
	      <td><p>Gender:</p><label>
	       <input type="radio" name="Gender" value="radio" id="Gender_0" required>
	        Male</label></td>
        </tr>
	    <tr>
	      <td><label>
	        <input type="radio" name="Gender" value="radio" id="Gender_1" required>
	        Female</label></td>
        </tr>
    </table>
	  <br>
    
	<p><label> D.O.B:</label></p>
      <input type="date"  name="dob" required><br>

       <p> <label for="textfield">Registration Number:</label></p>
      <input type="text" name="sturegno" class="textfield" required ><br>
<!-- Auto incremented in the table-->


		<p><label>Registration Date:</label></p><input name="regdate" type="datetime-local" required><br>

		<input type="submit" name="regbt1" id="regbt" value="Register">
   </div>
	 
  </form>
	 

</body>
</html>

Answer 2

我可以很方便地看到您的注册按钮，您确定这不是缓存问题吗？也许按Ctrl + F5。

该页面并没有一直滚动到html和CSS的底部

2 个答案: