我正在创建一个单页网站,每个部分占据整个视口的高度和宽度(100vw 和 100vw),对于移动屏幕,我使用媒体查询来调整高度以使内容适合,问题是,一个部分有表单,当用户输入输入时,页面向上滚动或有时向下滚动?
我不知道为什么会这样?
此表单的 HTML 为:
<section id="quote">
<div id="ugallerys" class="uparrow"><img class="centerimage img-responsive" src="images/up.png" />
</div>
<div class="box">
<div class="fwidth container-fluid">
<div class="row">
<div class="col-md-12">
<div id="contentquote">
<form method="POST" id="quoteform">
<div class="form centerfield">
<div class="heading white lesspace">Quote</div>
<hr>
<label for="Full Name">
<h4 class="white center">Full Name</h4>
</label>
<input type="text" class="form-control centerfield lwidth" id="name" onFocus="window.scrollTo(0, 0);" name="name" placeholder="e.g Tom Jones" />
<br />
<div class="centerfield lwidth">
<label for="Book Out Date">
<h4 class="white">Pickup Date</h4>
</label>
<input type="date" class="form-control" onFocus="window.scrollTo(0, 0);" id="bookoutdate" name="bookoutdate" />
</div>
<div class="centerfield lwidth">
<label for="Book In Date">
<h4 class="white">Dropoff Date</h4>
</label>
<input type="date" class="form-control" id="bookindate" name="bookindate" />
</div>
<div class="centerfield lwidth">
<h1><span id="days">0</span> Days</h1>
<hr>
</div>
<div class="centerfield lwidth">
<label for="Age">
<h4 class="white">Age</h4>
</label>
<input type="number" class="form-control" placeholder="e.g. 18" id="age" name="age" />
</div>
<div class="centerfield lwidth">
<label for="Email">
<h4 class="white">Email</h4>
</label>
<input type="email" class="form-control" placeholder="e.g. tomjones@demo.com" id="email" name="email" />
</div>
<div class="centerfield lwidth">
<label for="Contact">
<h4 class="white">Contact Number</h4>
</label>
<input type="number" class="form-control" placeholder="e.g. 03375664399" id="number" name="number" />
</div>
<div class="centerfield lwidth">
<label for="Comments">
<h4 class="white">Comments</h4>
</label>
<textarea class="form-control" id="comments" name="comments"></textarea>
</div>
<div class="toppadding centerfield">
<input type="submit" class="btn btn-success btn-lg" value="Send" name="submit" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="dcontact" class="downarrowsp3"><img class="centerimage img-responsive" src="images/down.png" />
</div>
</section>
本节的 CSS 是:
#quote {
height: 210vh !important;
overflow:hidden;
width: 100vw !important;
background-color: #000000;
margin:0px !important;
padding:0px !important;
}
这是网站本身的链接:http ://www.a1phantom.com/