html - div的背景色只覆盖50%

Question

我正在尝试让我的 div (#signupform) 在 div 的整个高度上显示浅灰色背景色。

而是在电子邮件输入字段结束时停止。

我怎样才能做到这一点？

实例:https://www.moneynest.co.uk/frustrating-newsletter-signup-box/

#signupform {
  background-color: lightgray;
}

#signupinput {
  display: block;
  text-align: center;
  max-width: 50%;
}

.email-sign-up-headline {
  padding-top: 10px!important;
}

#mcsignupbutton {
  width: 50%;
  display: block;
  text-align: center;
  margin-left: 25%;
}

#mcinputform {
  max-width: 50%;
  display: block;
  text-align: center;
}

<div id="signupform" style="background-color: lightgrey;">
  <center>
    <h3 class="email-sign-up-headline">Subscribe to the private Money Nest newsletter</h3>
  </center>
  <form action="https://moneynest.us11.list-manage.com/subscribe/post?u=9ccf2d2219536b32eaae3c3d1&amp;id=33b662ad0d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <center><input type="email" value="" name="EMAIL" class="email" id="mcinputform" placeholder="email address" required></center><input id="group_8" style="display: none;" checked="checked" name="group[12353][32]" type="checkbox" value="1" />
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ccf2d2219536b32eaae3c3d1_33b662ad0d" tabindex="-1" value=""></div>
      <div class="clear">
        <center><input type="submit" value="Subscribe" name="subscribe" id="mcsignupbutton"></center>
      </div>
    </div>
  </form>
</div>

Answer 1

这是因为 div.clear 中的 input[type="submit"] 向左浮动，而 .clear div在它之后没有任何东西可以清除那个 float 。要解决此问题，请将其添加到 .clear div:

.clear::after {
    content: '';
    clear: both;
    display: block;
}