阻止 Div 进入其他 Div 下方答案

【问题标题】：Stop Div from going underneath other Div阻止 Div 进入其他 Div 下方
【发布时间】：2016-09-17 05:32:53
【问题描述】：

我用谷歌搜索了一个小时，自己也弄乱了他的代码。我似乎无法找到为什么我的 div 不想坐在彼此之上。

一个 div 位于另一个 div 的下方，而我现在正在放屁，任何建议都会有所帮助。

重申问题：如何让所有 div 下推其他 div 的内容，而不是进入以下 div 下方？

这是重现我遇到的问题的 Codepen：https://codepen.io/livinglegendparagon/pen/wzWwya

   /* BG */
  body {
    background-color: #000;
    color: #000;
  }

    #bg {
      height: 100%;
      width: 100%;
      left: 0;
      top: 0;
      opacity: 1;
      position: relative;
      height: -webkit-calc(100vh);
      height:    -moz-calc(100vh);
      height:         calc(100vh);
    }
  #PUTBACKGROUNDHERE, #PUTBACKGROUNDHERE2, #PUTBACKGROUNDHERE3, #PUTBACKGROUNDHERE4 {
    background-color: #fff;
    width: 100%;
    position: relative;
    height: 100%;
    // min-height: -webkit-calc(100vh);
    // min-height:    -moz-calc(100vh);
    // min-height:         calc(100vh);
    padding: 2.5% 0;
    background-color: #fff;
    display: block;
    float: left;
    clear: both;
    @media (min-width: 280px) {
      padding: 2.5% 5%;
    }
  }
  #backGroundForViewWelcome {
    background-color: white;
    min-height: -webkit-calc(100vh);
    min-height:    -moz-calc(100vh);
    min-height:         calc(100vh);
  }
  .wrapper {
    height: 100%;
    width: 100%;
    display: block;
  }
  .boxForServices {
    position: relative;
    height: 21.5vh;
    margin: 3vh auto;
    width: 100%;
    color: white;
    &:first-child {
      margin-top: -webkit-calc(3vh + 40px);
      margin-top: -moz-calc(3vh + 40px);
      margin-top: calc(3vh + 40px);
    }
    &:last-child {
      margin-bottom: -webkit-calc(3vh - 40px);
      margin-bottom: -moz-calc(3vh - 40px);
      margin-bottom: calc(3vh - 40px);
    }
  }
  .boxForServicesTitle {
    cursor: pointer;
    position: relative;
    text-align: center;
    top: 50%;
    border: red 5px solid;
    background-color: blue;
    border-radius: 5px;
    margin: auto 5vh;
    padding: 5vh 10%;
  }
  #sizeThisTextBoxForServices {
    margin: 10% 10%;
    width: 80%;
  }
  .centerBox {
    margin: auto;
    text-align: left;
  }
  .otherInput {
    display: block;
    width: 100%;
    margin-bottom: 5%;
  }

【问题讨论】：

标签： html css sass css-selectors

【解决方案1】：

.boxForServices 缺少高度属性

添加 100% 的高度即可解决此问题。

我喜欢提问，因为一旦我发布问题，答案总会出现。

      .boxForServices {
        position: relative;
        height: 21.5vh;
        margin: 3vh auto;
        width: 100%;
        height: 100%;
        color: white;
        &:first-child {
          margin-top: -webkit-calc(3vh + 40px);
          margin-top: -moz-calc(3vh + 40px);
          margin-top: calc(3vh + 40px);
        }
        &:last-child {
          margin-bottom: -webkit-calc(3vh - 40px);
          margin-bottom: -moz-calc(3vh - 40px);
          margin-bottom: calc(3vh - 40px);
        }
      }

【讨论】：