如何使HTML中的部分高度相同？

Question

我有一个HTML网页，不同的页面上有一些部分，如下图所示

我需要每个部分都具有相同的高度，图像中的第一部分与直到屏幕的那个部分都是完美的，但是第二个图像中的第二部分比下面的屏幕稍低一些

我需要像第一部分一样，直到屏幕出现为止。我的代码：

body {
  font-family: Montserrat;
}

/*.paddingTB60 {padding:100px 0px 60px 0px;}*/

.gray-bg {
  background: #F1F1F1 !important;
  margin-top: -11vh;
  padding: 19.7vh;
}

p {
  overflow: hidden;
  color: #0a2240;
  text-align: center-left;
  font-size: 12pt;
  font-weight: 600;
  word-spacing: 2px;
}

.para1 {
  overflow: hidden;
  color: #0a2240;
  text-align: center-left;
  font-size: 12pt;
  font-weight: 600;
  word-spacing: 2px;
  margin-left: -2.5vh;
}

.paddingTBB {
  padding-top: 95px;
  padding-bottom: 30px;
}

.paddingTB {
  margin-top: 50px;
}

.paddingTBq {
  margin-top: 50px;
}

.paddingTBq2 {
  margin-top: 100px;
}

<div id="backtop">&#9650;</div>

<div id="zub" class="about-section paddingTB60 gray-bg">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-xs-12">
        <div class=" about-title clearfix">

          <div class="col-md-5 col-sm-5 how-img text-center">
            <img src="img/teamweserve.png" class="img-fluid" alt="" />
          </div>

          <div class="col-md-7 col-sm-7">
            <h1 class="tws">TEAMS WE SERVE</h1><br>

            <p class="para1">CEOs face incessant barrage of “go to cloud”, “go digital”.</p>
            <p class="para1">CFOs are under tremendous pressure to free-up or find capital in legacy IT to invest in digital, IT modernization.</p>
            <p class="para1">CIOs/CTOs are in uneviable position to maintain legacy IT while transforming business for digital, cloud.</p>
            <p class="para1">HR is struggling with talent and skills shortage.</p>
            <p class="para1">Functional heads are under pressure to show results fast, and unknowingly give out critical information to suppliers.</p>
            <p class="para1">Procurement/Sourcing are handed situations after the damage has been done by the organizational silos.</p>

          </div>
        </div>
      </div>

      <div class="login" id="theFormID1" action="">
        <button type="submit" class="btn btn-warning" id="submit_on1" onclick="window.location.href='setupdiscussion.php'">SET UP A DISCUSSION</button>
      </div>
    </div>
  </div>
</div>

我该怎么做，有人可以帮助我吗？

Answer 1

更改此：

.gray-bg {
    background: #F1F1F1 !important;
    margin-top: -11vh;
    padding: 19.7vh;
}

到

.gray-bg {
    background: #F1F1F1 !important;
    margin-top: -11vh;
    padding: 19.7vh;

    height: 900px;
    overflow: hidden;
}

如果您想改变高度，只需将height: 900px;更改为height: what you want;，并确保每个灰色部分都具有类gray-bg。您可能还需要添加overflow: hidden;，以确保没有内容从div溢出。

摘要：

body {
  font-family: Montserrat;
}

/*.paddingTB60 {padding:100px 0px 60px 0px;}*/

.gray-bg {
  background: #F1F1F1 !important;
  margin-top: -11vh;
  padding: 19.7vh;
  height: 900px;
  overflow: hidden;
}

p {
  overflow: hidden;
  color: #0a2240;
  text-align: center-left;
  font-size: 12pt;
  font-weight: 600;
  word-spacing: 2px;
}

.para1 {
  overflow: hidden;
  color: #0a2240;
  text-align: center-left;
  font-size: 12pt;
  font-weight: 600;
  word-spacing: 2px;
  margin-left: -2.5vh;
}

.paddingTBB {
  padding-top: 95px;
  padding-bottom: 30px;
}

.paddingTB {
  margin-top: 50px;
}

.paddingTBq {
  margin-top: 50px;
}

.paddingTBq2 {
  margin-top: 100px;
}

<div id="backtop">&#9650;</div>

<div id="zub" class="about-section paddingTB60 gray-bg">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12 col-xs-12">
        <div class=" about-title clearfix">

          <div class="col-md-5 col-sm-5 how-img text-center">
            <img src="img/teamweserve.png" class="img-fluid" alt="" />
          </div>

          <div class="col-md-7 col-sm-7">
            <h1 class="tws">TEAMS WE SERVE</h1><br>

            <p class="para1">CEOs face incessant barrage of “go to cloud”, “go digital”.</p>
            <p class="para1">CFOs are under tremendous pressure to free-up or find capital in legacy IT to invest in digital, IT modernization.</p>
            <p class="para1">CIOs/CTOs are in uneviable position to maintain legacy IT while transforming business for digital, cloud.</p>
            <p class="para1">HR is struggling with talent and skills shortage.</p>
            <p class="para1">Functional heads are under pressure to show results fast, and unknowingly give out critical information to suppliers.</p>
            <p class="para1">Procurement/Sourcing are handed situations after the damage has been done by the organizational silos.</p>

          </div>
        </div>
      </div>

      <div class="login" id="theFormID1" action="">
        <button type="submit" class="btn btn-warning" id="submit_on1" onclick="window.location.href='setupdiscussion.php'">SET UP A DISCUSSION</button>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以创建任意高度的通用类，然后将该类添加到所有部分。