Question

垂直放置了四个div，但是它们之间有空间。我怎么能填补它们之间的空间。我无法找到填补空白的方法。任何人都可以帮忙解决这个问题。

    <div class="pageTwo">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;margin-top:100px !important;">Works</h1>
  <div class="block-works">
    <p class="work">We at Good <span class="letter-T">T</span>ree production watch movies at full time. Watching movies at 24 X 7 is our duty and reviewing them is our homework. </p>
  </div>
 </div>
 <div class="pageThree">
 <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;margin-top:100px !important;">About Us</h1>
  <div class="block-about-us">
    <p class="work">We at Good <span class="letter-T">T</span>ree production are two bunch of gladiators worshipping movies.</p>
  </div>
 </div>
  <div class="pageFour">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;margin-top:50px">Contact Us</h1>
  <div class="block-contact-us text-center"> 
    <p class="work">
      Like us on </br>
      <a>
         <span class="fa fa-facebook-official" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p></br>
    <p class="work" style="">
      Follow us on </br>
      <a>
         <span class="fa fa-twitter" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
  </div>
 </div>

CSS：

.pageOne{
      background-size:cover;
    background-color:#DCF5F4;
    height: 60%;
}
.pageTwo{
    background-color: rgb(185, 196, 234);
    background-size:cover;
    height:80%;
    width: 100%;
    margin-top:-3.7%;
}
.pageThree{
    background-color: #F3A0A0;
    background-size:cover;
    height:60%;
}
.pageFour{
  background-color:#B8F2DF;
  background-size:cover;
  height:80%;
}

有没有人帮我解决这个问题在此先感谢

Answer 1

您可以在父项上使用flexbox，在项目上使用flex-grow: 1，以使它们增长以适合父项，如果您希望它们增长到适合窗口的高度。如果您不希望它们像那样成长，请删除它。

＆＃13;

* {margin:0;padding:0;}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > div {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.pageOne {
  background-size: cover;
  background-color: #DCF5F4;
}

.pageTwo {
  background-color: rgb(185, 196, 234);
  background-size: cover;
}

.pageThree {
  background-color: #F3A0A0;
  background-size: cover;
}

.pageFour {
  background-color: #B8F2DF;
  background-size: cover;
}

＆＃13;

<div class="pageTwo">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Works</h1>
  <div class="block-works">
    <p class="work">We at Good <span class="letter-T">T</span>ree production watch movies at full time. Watching movies at 24 X 7 is our duty and reviewing them is our homework. </p>
  </div>
</div>
<div class="pageThree">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">About Us</h1>
  <div class="block-about-us">
    <p class="work">We at Good <span class="letter-T">T</span>ree production are two bunch of gladiators worshipping movies.</p>
  </div>
</div>
<div class="pageFour">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Contact Us</h1>
  <div class="block-contact-us text-center">
    <p class="work">
      Like us on </br>
      <a>
        <span class="fa fa-facebook-official" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
    </br>
    <p class="work" style="">
      Follow us on </br>
      <a>
        <span class="fa fa-twitter" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
  </div>
</div>

＆＃13;

或者，如果您只是希望这些部分相互冲洗，请移除h1上的内边距（这将会折叠，导致边距出现在各部分之间），并在div本身上使用填充。然后删除默认边距，因此这些部分中的p元素也不具有在父级之外崩溃的边距。如果要在那里填充，可以将底部填充应用于元素的底部。

＆＃13;

* {margin:0;}

.pageOne {
  background-size: cover;
  background-color: #DCF5F4;
}

.pageTwo {
  background-color: rgb(185, 196, 234);
  background-size: cover;
  padding-top: 100px;
}

.pageThree {
  background-color: #F3A0A0;
  background-size: cover;
  padding-top: 100px;
}

.pageFour {
  background-color: #B8F2DF;
  background-size: cover;
  padding-top: 50px;
}

＆＃13;

<div class="pageTwo">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Works</h1>
  <div class="block-works">
    <p class="work">We at Good <span class="letter-T">T</span>ree production watch movies at full time. Watching movies at 24 X 7 is our duty and reviewing them is our homework. </p>
  </div>
</div>
<div class="pageThree">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">About Us</h1>
  <div class="block-about-us">
    <p class="work">We at Good <span class="letter-T">T</span>ree production are two bunch of gladiators worshipping movies.</p>
  </div>
</div>
<div class="pageFour">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Contact Us</h1>
  <div class="block-contact-us text-center">
    <p class="work">
      Like us on </br>
      <a>
        <span class="fa fa-facebook-official" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
    </br>
    <p class="work" style="">
      Follow us on </br>
      <a>
        <span class="fa fa-twitter" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
  </div>
</div>

＆＃13;

Answer 2

百分比是多少？要设置百分比高度，其父元素必须具有显式高度。

Here is a full answer

简而言之：当父元素没有明确的高度时，您无法设置百分比高度。或者，如果div被定位，'包含块'，也就是最近的祖先。

较新的浏览器（＆gt; IE9）可以使用视口高度：

div {
    height:100vh; 
}

如何垂直填充div之间的空间

2 个答案: