HTML主体下方的多余空白

Question

我正在开发一个有角度的js应用程序，该应用程序由可滑动的轮播组成，其中填充了从json数组（保存在js var中）中获取的数据。 但是，我遇到了一个问题。 页面底部会出现大量空白。 我似乎无法确定造成此多余空白的原因。 我在CSS中将填充和边距设置为0。 当我检查元素时，空格似乎在html之外，因此似乎几乎没有将其添加到我的元素之一的属性中。

这是我的CSS，但底部也有一个完整的链接

html, body, #carousel, #carousel ul, #carousel li {
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}

#link{
position: absolute;
bottom:20px;
right:20px;
}

#carousel {
background: white;

 width: 100%;
 -webkit-backface-visibility: hidden;
 -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
 -webkit-transform-style: preserve-3d;
 }

 #carousel ul.animate {
 -webkit-transition: all .3s;
 -moz-transition: all .3s;
 -o-transition: all .3s;
 transition: all .3s;
 }

 #carousel ul {
-webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}

#carousel ul {

position: relative;
}

#carousel li {
float: left;
width:100%;  -webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
}

#carousel li h2 {
color: #fff;
font-size: 30px;
text-align: center;
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}

#carousel li.pane1 {
background: #fff;
}

#carousel li.pane2 {
background: #fff;
}

#carousel li.pane3 {
background: #fff;
}


#carousel li.pane4 {
background: #fff;
}


.january { 
background-color:#ffe0b0;
height:8.33%;
}
.february { 
background-color:#b0f7ff;
height:8.33%;
}
.march { 
background-color:#e0b0ff;
height:8.33%;
}
.april { 
background-color:#ffb9b0;
height:8.33%;
}
.may { 
background-color:#b0cfff;
height:8.33%;
}
.june { 
background-color:#b0ffe0;
height:8.33%;
}
.july { 
background-color:#ffb0f7;
height:8.33%;
}
.august { 
background-color:#ceffb0;
height:8.33%;
}
.september { 
background-color: #ffb0cf;
height:8.33%;
}
.october { 
background-color:#bab0ff;
height:8.33%;
}
.november { 
background-color:#f6ffb0;
height:8.33%;
}
.december { 
background-color: #b0f6ff; 
height:8.33%;
}

.day {
  font-family: 'Playfair Display Regular', serif; 
  color:#000; 
  text-align: center;
 }
 .titletext {
  font-family: 'Playfair Display Bold', serif; 
  margin-left:20px;
  position: relative;
  top: 50%; 
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  display:inline-block;
  }
  .title {
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px; 
  margin-top: 0px;
  text-align: initial;
  }
  .quote {
    font-family: 'Playfair Display Italic', serif; 
     font-style: italic; 
    font-size:12px; 
    margin-top:10px;
margin-left:20px;
margin-right: 20px;
line-height:1.2em;
 }
 .attribution {
    font-family: 'Playfair Display Regular', serif; 

    font-size:10px;
margin-left:25px;
margin-right: 20px;
line-height:1.2em;
}
.textt {
    font-family: 'Playfair Display Regular', serif; 

    font-size:12px; 
    margin-top:10px;
margin-left:20px;
margin-right: 20px;
line-height:1.2em;
 }
 .date {
font-family: 'Playfair Display Regular', serif; 
margin-left:15px;
padding-top: 10px;
}
#circleJan {
border-radius: 50%;
border: 3px solid #ffe0b0;
background-color:#ffe0b0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleFeb {
border-radius: 50%;
 border: 3px solid #b0f7ff;
background-color:#b0f7ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleMarch {
border-radius: 50%;
border: 3px solid #e0b0ff;
background-color:#e0b0ff;
width: 20px;
height:20px;
margin-left:15px;
} 
#circleApril {
border-radius: 50%;
border: 3px solid #ffb9b0;
background-color:#ffb9b0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleMay {
border-radius: 50%;
border: 3px solid #b0cfff;
background-color:#b0cfff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleJune {
border-radius: 50%;
border: 3px solid #b0ffe0;
background-color:#b0ffe0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleJuly {
border-radius: 50%;
border: 3px solid #ffb0f7;
background-color:#ffb0f7;
width: 20px;
height:20px;
margin-left:15px;
}
#circleAug {
border-radius: 50%;
border: 3px solid #ceffb0;
background-color:#ceffb0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleSept {
border-radius: 50%;
border: 3px solid #ffb0cf;
background-color:#ffb0cf;
width: 20px;
height:20px;
margin-left:15px;
}
#circleOct {
border-radius: 50%;
border: 3px solid #bab0ff;
background-color:#bab0ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleNov {
border-radius: 50%;
border: 3px solid #f6ffb0;
background-color:#f6ffb0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleDec {
border-radius: 50%;
border: 3px solid #b0f6ff;
background-color:#b0f6ff;
width: 20px;
height:20px;
margin-left:15px;
}
.bg{}
.main{height:100%}
.heading{
 font-family: 'Playfair Display Bold', serif; 
 text-align:center;
 margin-top: 10px; 
 font-size:18px;
}
.stepOne{
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px; 
  margin-right:15px;
}
.stepTwo{
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px; 
  margin-right:15px;
 }
 .stepThree{
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px;
  margin-right:15px;
 }
 .stepFour{
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px; 
  margin-right:15px;
 }
 .stepFive{
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px; 
  margin-right:15px;
 }
 .stepSix{
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px; 
  margin-right:15px;
 }
 .stepSeven{
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px; 
  margin-right:15px; 
 }
 .stepEight{
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px; 
  margin-right:15px;
 }
 .stepNine{
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px; 
  margin-right:15px;
 }
 .stepTen{
  font-family: 'Playfair Display Bold', serif; 
  margin-left:50px; 
  margin-right:15px;
 }
 .stepEleven{
  font-family: 'Playfair Display Bold', serif;  
  margin-left:50px; 
  margin-right:15px;
 }
 .stepTwelve{
  font-family: 'Playfair Display Bold', serif;  
  margin-left:50px;  
  margin-right:15px;
 }

plunker

Answer 1

当前您的#carousel li的height: 100%设置为height: 100% ，这将在第一个窗格中产生额外的空间。

我也强烈建议将CSS重构为更简洁的组织，因为我注意到了很多重复的代码。 最简单的示例是.stepOne到.stepTwelve ，它们都包含相同的样式。 将其折叠为一个类，并将其应用于所有需要的元素。

Answer 2

如果要在pane1元素后面引用空白，则可以通过将其height和min-height为initial来摆脱它：

#carousel li.pane1 {
  height: initial;
  min-height: initial;
  background: #fff;
}

Plunker

我应该提到，在很多情况下，您应该使用类时才使用ID。 例如，如果只有一个.january元素，则将其设置为ID而不是类，因为类是用于对多个元素进行分组的。 pane[x]类也是如此。 您还应该合并相同的样式，例如

#pane2, #pane3, #pane4 {
    background: #fff;
}

或者，如果您只是给他们全部相同的课程：

.pane {
    background: #fff;
}