Question

我有谷歌一个小时，并且自己乱码。我似乎无法找到为什么我的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%;
  }

Answer 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);
        }
      }

阻止Div进入其他Div下方

1 个答案: