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%，这会导致第一个窗格中出现额外空间。

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

Answer 2

如果您在pane1元素之后引用空格，则可以通过将height和min-height设置为initial来摆脱它：< / p>

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

Plunker

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

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

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

.pane {
    background: #fff;
}

html正文下面的额外空白区域

2 个答案: