html - CSS Overlay 导致在小型设备上访问所有表单时出现问题

Question

我有一个网页，点击我!显示和覆盖的按钮，以及其中的一个表单。

虽然叠加层和表单按预期隐藏和显示，但我面临的问题是，在小型设备上，我无法滚动到表单底部。

笨蛋:https://plnkr.co/edit/aHfzVNuMnt3snpn4jTsf?p=preview 在上面，点击点击我<p>

HTML:

<section class="overlay overlay-hugeinc" ng-class="{true : 'open'}[showModal]">

  <form>
    <p>My form</p>
    <input type="text" name="firstname" placeholder="firstname">
    <input type="text" name="lastname" placeholder="lastname">
    <input type="text" name="dob" placeholder="DOB">
    <input type="text" name="gender" placeholder="gender">
    <br><br><br>

    <!-- Address -->
    <input type="text" name="housenumber" placeholder="housenumber">
    <input type="text" name="street" placeholder="street">
    <input type="text" name="town" placeholder="town">
    <input type="text" name="county" placeholder="county">
    <input type="text" name="postcode" placeholder="postcode">
    <input type="text" name="country" placeholder="country">
    <br><br><br>


    <input type="text" name="email" placeholder="email">
    <input type="text" name="facebookid" placeholder="facebook ID">
    <input type="text" name="twitterid" placeholder="twitter ID">
    <br><br>


    <button>Submit</button>
    <br>
    <button ng-click="showModal = false">Cancel</button>
  </form>
</section>

CSS:

.overlay {
  background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
}

.overlay form {
  display: inline-block;
  list-style: outside none none;
  margin: 0 auto;
  position: relative;
  background: white;
  width: 350px;
  padding: 1.3em;
}

.overlay form input {
  width: 100%;
  margin-bottom: 1em;
  padding: 0.7em 0;
  text-align: center;
}

.btn-action {
  width: 100%;
}

.cancel {
  text-decoration: underline;
  margin-top: 1.5em;
  font-size: 12px;
  cursor: pointer;
}

.overlay-hugeinc {
  opacity: 0;
  transition: opacity 0.5s ease 0s, visibility 0s ease 0.5s;
  visibility: hidden;
}

.overlay-hugeinc.open {
  opacity: 1;
  transition: opacity 0.5s ease 0s;
  visibility: visible;
}

.overlay-hugeinc span form {
  opacity: 0.4;
  transform: translateY(-25%) rotateX(35deg);
  transition: transform 0.5s ease 0s, opacity 0.5s ease 0s;
}

.overlay-hugeinc.open span form {
  opacity: 1;
  transform: rotateX(0deg);
}

.overlay-hugeinc.close span form {
  transform: translateY(25%) rotateX(-35deg);
}

Answer 1

添加overflow:auto这个类overlay

.overlay {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    overflow: auto;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
}