div顶部和包装器之间的奇怪差距

时间：2018-03-11 20:46:09

标签： html css

任何人都可以帮助解决“箭头包装2”div和“关于”div之间的奇怪差距，因为我不明白为什么它在哪里以及它来自哪里。因为我需要“约”div底部的箭头，但我不能使用绝对，因为这会混淆一切。所以我尝试制作一个包装，但它不是div的100vh，奇怪的是。任何帮助都会很棒！

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@import "compass/css3";
* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
        font-family: 'Josefin Sans', sans-serif;
}


#main{
    width:100%;
    height:100vh;
    background:#ED4C67;
    text-align: center;
    display: block;
}
/* Typewriter */
.typewrite{
  color:#fff;
  text-decoration:none; 
  font-family: 'Josefin Sans', sans-serif;
  font-size:60px;
    display:block;
}

/* arrow */
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

i {
  display: block;
  color: #fff;
}
.arrow {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
#about {
    width:100%;
    height:100vh;
    background: white;
    display:block;
    
}



.wrapper {
    height: 100%;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}

.skull {
    width:50%;
    float:left;
}

.about_para {
    display:block;
    color:#ED4C67;
    font-size:40px;
}

@media only screen and (max-width: 700px) {

}

.vertical-center {
    position: relative;
    top:50%;
    left: 0%;
    transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
}

.arrow2 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px;
}

#portfolio {
     width:100%;
    height:100vh;
    background:#ED4C67;
    display:block;
    position:bottom;
}

.wrappert {
    height: 100%; 
    width: 100%;
    display: table;
}

.arrow-wrapper {
position: relative; 
}

.arrow-wrapper-2 {
    position: relative;
    height:100vh;
}
<!DOCTYPE html>
<html>
    <head>
    <title>JAKUB ORZEG-WYDRA</title>
    <link rel="stylesheet" type="text/css" href="main.css" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <script src="main.js"></script>
        <div id="main">

            <div class="wrappert">
                <div class="wrapper">
            <h1>
            <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Jakub Orzeg-Wydra.", "Im a web designer.", "and a Media Producer." ]'>
            
            </a>
            </h1>
                </div> </div>

            <div class="arrow-wrapper"><div class="arrow bounce"><A href="#about"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></A></div></div>

        </div>
        
        <div id="about">

        <div class="vertical-center">
        <center><p class="about_para">I am a 15 year old from scotland who <br>
loves to code and produce media like <br>
videos. I also love sports and fitness.</p></center></div>
            <div class="arrow-wrapper-2"><div class="arrow2 bounce"><A href="#about"><i class="fa fa-angle-down fa-5x" aria-hidden="true" style="color:red;"></i></A></div></div>
        
        </div>
        
        <div id="portfolio">
        
        </div>
    </body>

</html>

1 个答案:

答案 0 :(得分：0)

这很简单，在那一节你有两个元素。第一个是内容的高度，第二个是 100vh ，两者都是流入元素（因为第一个只设置为position:relative）所以如果你这样做的话你有超过100vh。这就是属于100vh部分的箭头在外面的原因。

如果我们引用documentation：

  

亲戚

     

元素根据正常流程定位   文档，然后根据值的相对于自身的偏移量   顶部，右侧，底部和左侧。 偏移量不会影响位置   任何其他元素;因此，给出的空间   页面布局是相同的，就像位置是静态的一样。

要解决此问题，您需要对第一个元素使用绝对位置（将其从流中移除，以便不再考虑高度）并使其父相对位置。

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
@import "compass/css3";
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-family: 'Josefin Sans', sans-serif;
}

#main {
  width: 100%;
  height: 100vh;
  background: #ED4C67;
  text-align: center;
  display: block;
}


/* Typewriter */

.typewrite {
  color: #fff;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 60px;
  display: block;
}


/* arrow */

@-moz-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@-webkit-keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

i {
  display: block;
  color: #fff;
}

.arrow {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

#about {
  width: 100%;
  height: 100vh;
  background: white;
  display: block;
  position:relative;
}

.wrapper {
  height: 100%;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

.skull {
  width: 50%;
  float: left;
}

.about_para {
  display: block;
  color: #ED4C67;
  font-size: 40px;
  text-align:center;
}

@media only screen and (max-width: 700px) {}

.vertical-center {
  position: absolute;
  top: 50%;
  left: 0;
  right:0;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
}

.arrow2 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px;
}

#portfolio {
  width: 100%;
  height: 100vh;
  background: #ED4C67;
  display: block;
  position: bottom;
}

.wrappert {
  height: 100%;
  width: 100%;
  display: table;
}

.arrow-wrapper {
  position: relative;
}

.arrow-wrapper-2 {
  position: relative;
  height: 100vh;
}
<!DOCTYPE html>
<html>

<head>
  <title>JAKUB ORZEG-WYDRA</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <script src="main.js"></script>
  <div id="main">

    <div class="wrappert">
      <div class="wrapper">
        <h1>
          <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Jakub Orzeg-Wydra.", "Im a web designer.", "and a Media Producer." ]'>

          </a>
        </h1>
      </div>
    </div>

    <div class="arrow-wrapper">
      <div class="arrow bounce">
        <A href="#about"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></A>
      </div>
    </div>

  </div>

  <div id="about">

    <div class="vertical-center">
        <p class="about_para">I am a 15 year old from scotland who <br> loves to code and produce media like <br> videos. I also love sports and fitness.</p>
    </div>
    <div class="arrow-wrapper-2">
      <div class="arrow2 bounce">
        <A href="#about"><i class="fa fa-angle-down fa-5x" aria-hidden="true" style="color:red;"></i></A>
      </div>
    </div>

  </div>

  <div id="portfolio">

  </div>
</body>

</html>

相关问题
最新问题