文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >在html和css中，页面不会一直滚动到底部。

问在html和css中，页面不会一直滚动到底部。
EN

Stack Overflow用户
提问于 2018-07-03 08:08:38
回答 2查看 252关注 0票数 0

我已经用html和css创建了一个注册表。早些时候只有7个输入字段，因为我需要另外2个输入字段，所以我又添加了2个文本框来输入用户名和密码。

当它只有七个文本框时，它向我显示了提交按钮。但是，在我添加了额外的文本框后，虽然我向下滚动，但它不会显示注册按钮

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

下面是css代码：

​

代码语言：javascript
复制
@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代码：

代码语言：javascript
复制
<!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
css
EN

回答 2

Stack Overflow用户

发布于 2018-07-03 08:44:01

您正在为.regform设置固定的高度大小

如下所示进行更新：

代码语言：javascript
复制
.regform {
    width: 500px;
    height: 100%;
    [...]
}

​

代码语言：javascript
复制
@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;
	
}
代码语言：javascript
复制
<!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>

​

票数 0
EN

Stack Overflow用户

发布于 2018-07-03 08:49:46

我很容易看到你的注册按钮，你确定这不是缓存问题吗？也许可以按ctrl + f5。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51145086

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档