调整浏览器大小时，为什么div之间有时会有间隙？

Question

如果您调整浏览器的大小，则Private Sub Worksheet_Change(ByVal Target As Range) If Target.Address = "$G$1" Then CheckBox1.Value = False CheckBox2.Value = False CheckBox3.Value = False Call CheckBox1_Change Call CheckBox2_Change Call CheckBox3_Change End If End Sub Private Sub CheckBox1_Change() If Range("B3").Value = "Y" Then CheckBox1.Enabled = True Else CheckBox1.Enabled = False CheckBox1.Value = False End If End Sub Private Sub CheckBox1_Click() If CheckBox1.Value = False Then Range("H3").Value = "" End If End Sub Private Sub CheckBox2_Change() If Range("B4").Value = "Y" Then CheckBox2.Enabled = True Else CheckBox2.Enabled = False CheckBox2.Value = False End If End Sub Private Sub CheckBox3_Change() If Range("B5").Value = "Y" Then CheckBox3.Enabled = True Else CheckBox3.Enabled = False CheckBox3.Value = False End If End Sub 的底部和父div（.services-items）之间会有一个间隙。这是代码：

.services

#one {
  background-color: #fff;
  height: 50%;
  width: 100%;
}
#two {
  background-color: #fff;
  height: 50%;
  width: 100%;
}
body,
html {
  height: 100%;
  background-color: #000;
}
* {
  margin: 0;
}
.services {
  background: green;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 0 50px;
  color: #fff;
}

.services-items {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 50px;
  height: auto;
  text-align: center;
  position: relative;
}
.services-items h2 {
  margin: 20px 0;
}
.services-items p {
  line-height: 150%;
}

Answer 1

将height:100%添加到service-items并添加

*{box-sizing:border-box;}到您的CSS文件

这是必需的，因为边框-

在元素的总宽度和高度中包括填充和边框：

*{box-sizing:border-box;}

#one {
  background-color: #fff;
  height: 50%;
  width: 100%;
}
#two {
  background-color: #fff;
  height: 50%;
  width: 100%;
}
body,
html {
  height: 100%;
  background-color: #000;
}
* {
  margin: 0;
}
.services {
  background: green;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 0 50px;
  color: #fff;
}

.services-items {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 50px;
  height: 100%;
  text-align: center;
  position: relative;
}
.services-items h2 {
  margin: 20px 0;
}
.services-items p {
  line-height: 150%;
}

<div id="one"></div>


<div class="services">
  <a>
    <div class="services-items">
      <h2>Service 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique amet atque recusandae, consequatur facere nesciunt. Placeat nostrum, aliquam suscipit. Tempore obcaecati sed eligendi cumque! Quo et, quod veniam nulla maxime quos voluptas harum
        odio ipsam libero repellat dicta hic. Eos!</p>

    </div>
  </a>
  <a>
    <div class="services-items">
      <h2>Service 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur vitae illum, alias suscipit ipsa soluta optio eos officia ducimus incidunt maiores molestias velit, delectus libero, ad eaque repellendus. Rerum, rem doloribus, cupiditate
        quos ex hic porro distinctio beatae. Vero, harum, autem. Quo itaque assumenda, mollitia et repellendus vel porro.</p>

    </div>
  </a>
  <a>
    <div class="services-items">
      <h2>Service 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium error et animi, porro omnis facilis voluptatum vel voluptatem pariatur quasi debitis in ratione voluptas eos ex maiores adipisci, nesciunt aliquid alias maxime accusamus veritatis?
        Dignissimos, perspiciatis deserunt numquam animi rerum aliquid mollitia, blanditiis dolore architecto.</p>
      <h3>Jos haluat tämän palvelun/tuotteen, ota yhteyttä ja kerro viestissä.</h3>
    </div>
  </a>
</div>


<div id="two"></div>

Answer 2

为您的代码提供的另一种解决方案

.services a {
   display: flex;
   align-self: stretch; 
}