HTML主体下方的多余空白

Question

I am working on an angular js app that consists of a swipeable carousel populated with data taken from a json array (which is held in a js var). However, I have run into an issue; a large amount of white space appears at the bottom of the page. I cannot seem to determine the cause of this extra white space. I have padding and margins set to 0 in the css. When I inspect the element the white space appears to be outside of the html so it seems almost as if its not even being added by a property of one of my elements.

heres my css but there is a full plunk linked at the bottom as well

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

Your #carousel li is currently being set at a height: 100% which is causing the extra space in your first pane.

I would also strongly advise refactoring your CSS to more concise organization since I noticed a lot of repetitive code. The simplest example of this is .stepOne through .stepTwelve which all contain the same styles. Collapse that into one class and apply it across all the elements needed.

Answer 2

If you're referring to the white space after the pane1 element, you can get rid of of it by setting its height and min-height to initial :

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

Plunker

I should mention, in a lot of instances you're using classes when you should be using IDs. If there's only one .january element for example, set it as an ID rather than a class, as classes are meant for grouping multiple elements. The same goes for your pane[x] classes. You should also merge your identical styles, eg

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

Or if you simply give them all the same class:

.pane {
    background: #fff;
}