Bootstrap轮播溢出顶部div和页脚

Question

我正试图修复一个引导轮播，该引导轮会溢出其上方的div和下方的页脚。

这就是我的应用中的样子

我尝试重现问题here，但我无法重现图片上的全部问题。但是您可以看到轮播在自身上方溢出了div，因为您无法点击蓝色按钮。

h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}

.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    background-color: rgba(0,0,0,0);
    filter: alpha(opacity=50);
    opacity: 1 !important;
}

.carousel-caption{
    bottom:auto;
    top:20%;
    padding:2%;
    background:transparent;
    /*color:#B3D567;*/
    color:black;

}
.item{
  height:300px !important;
}
.carousel {
    height: 100%;
}
.carousel .item,
.carousel .item.active,
.carousel .carousel-inner {
    height: 100%;
}

.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;

}
.bs-example{
    margin: 20px;
}

.carousel.carousel-fade .item {
  opacity:0;
  filter: alpha(opacity=0); /* ie fix */
}

.carousel.carousel-fade .active.item {
    opacity:1;
    filter: alpha(opacity=100); /* ie fix */
}

这是怎么回事？谢谢。