如何在屏幕上正确划分视口高度？

Question

我是一名后端Web开发人员，在前端Web设计方面经验很少。

我需要有关视口高度“ vh”的帮助。移动屏幕的100vh分为85vh + 15vh的两个格。

在ios的Chrome浏览器上，它可以正确显示，但在Android上，则不能正确显示（请在下面找到图像以进行正确理解）。

我想要--

---

但情况如何-

我该如何解决。在iOS中使用Chrome时，一切正常。它仅在android上。任何帮助表示赞赏。

以下代码：- HTML：-

 <section id="hero">
    <div class="bgVideo">
            <div class="heroKidsOverlay"></div>
        <video autoplay loop muted playsinline id="bgvid">
            <source src="assets/video/kids_section_banner.mp4" 
type="video/webm" />
            <source src="assets/video/kids_section_banner.mp4" 
type="video/mp4" />
        </video><!--video-->
        <div class="heroCaption">
            <h3>tailoring services for kids</h3>
            <a href="#" class="btn btn-primary btn-md">book an 
 appointment</a>
        </div><!--hero caption-->
    </div><!--bg video-->
</section><!--hero section-->

 <!--CUSTOMER CARE SECTION-->
 <section id="customerCareSection">
        <div class="customerCareCaption">
            <div class="ccinfo">
                <h3>Customer Service - 9 to 7</h3>
                <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" 
data-cfemail="355c5b535a755154474f5c5a5b565459591b565a58"> 
[email&#160;protected]</a></p>
            </div><!--ccinfo-->
        </div><!--customer care caption-->
    </section><!--customer section-->

css：-

#hero .bgVideo {
position: relative;
overflow: hidden;
height: 85vh;
width: 100%;

}

#customerCareSection {
background-color: #F6454F;
height: 15vh;
position: relative;
border-top: 1px solid ghostwhite;
/* border-bottom: 1px solid ghostwhite; */
  }

Answer 1

您只需要重置margin和padding。尝试将此CSS代码添加到CSS文件的顶部。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}