html - 页面在 html 和 css 中没有一直滚动到底部

标签 html css

我已经使用 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>

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

最佳答案

您正在为您的 .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>

关于html - 页面在 html 和 css 中没有一直滚动到底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51145086/

上一篇：css - FontAwesome 5 与伪元素和附加类一起使用

下一篇：javascript - 顺风 CSS 导航栏

相关文章：

javascript - 为什么当我在 TextArea 中显示 JavaScript 时，它会执行？

javascript - 如何让用户使用反引号发布代码片段并使用 google code preetify 显示代码？

css - 在 Drupal 7 中为 Md Megamenu 自定义样式

html - 如何在选择框选项中显示星号？

本地主机上的 Css 3 Pie

css - 删除包装 div 之前的空格

javascript - 当我点击它时，我想让我的图像弹出更大

html - Chrome 和 Firefox 中的文本区域行和列大小不一致

html - 如何将图像与多个段落居中

html - 如何使所有内容出现在下拉菜单中？

©2024 IT工具网  联系我们