Bootstap传送带不能在div内工作

Question

我正在建立一个使用Bootstrap并使用100％高度的传送带的网站。问题是，它的工作原理，但不在另一个分区。我的Joomla系统默认生成两个div，所以我无法避免。我应该如何解决这个问题？

DEMO与DIV（不工作）：https://jsfiddle.net/55gfw2jg/

DEMO没有DIV（工作）：https://jsfiddle.net/55gfw2jg/1/

HTML：

 <div> 
     <div> 
     <header id="myCarousel" class="carousel slide"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <!-- Wrapper for Slides --> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 1</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the second background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 2</h2> 
       </div> 
      </div> 
      <div class="item"> 
       <!-- Set the third background image using inline CSS below. --> 
       <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> 
       <div class="carousel-caption"> 
        <h2>Caption 3</h2> 
       </div> 
      </div> 
     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="icon-prev"></span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="icon-next"></span> 
     </a> 

    </header> 
    </div> 
    </div> 

CSS：

html, 
body { 
    height: 100%; 
} 

.carousel, 
.item, 
.active { 
    height: 100%; 
} 

.carousel-inner { 
    height: 100%; 
} 

/* Background images are set within the HTML using inline CSS, not here */ 

.fill { 
    width: 100%; 
    height: 100%; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

JS：

$('.carousel').carousel({ 
    interval: 5000 //changes the speed 
}) 

如果我在<header>之前和之后删除两个“div”，代码将起作用。我如何使它工作？因为它是由Joomla生成的，所以我无法取消这两个div。

Answer 1

的问题是多余的div的高度补充说：这里正在摆弄着两个你divs- https://jsfiddle.net/55gfw2jg/3/

我说：

div{ 
    height:100%; 
} 

Answer 2

的问题是两个outter div的没有高度，所以你旋转木马的高度为100％，基于高度为0.

给予div高度为100％可能导致与其他div的问题，所以如果您无法控制这两个outter div并且它们是总是一个在你的代码的最顶端你可以使用一些jquery为第一个div和第一个div添加一个类，然后将高度分配给这些类。

jQuery的

$("div").first().addClass("outter"); 
$("div div").first().addClass("inner"); 

CSS

.outter, .inner{ 
     height: 100%; 
} 

看到小提琴https://jsfiddle.net/x07q5o6z/