导航不停留在滑块底部

Question

在我的滑块中，它应该有图像，标题和信用在下面，然后在底部导航。不过出于某种原因，我的导航并没有停留在滑块的底部，而是滑过标题坐在图像幻灯片的下方，我无法弄清楚原因。我相信这是一个CSS问题，但对我来说，一切听起来都很合理。

如果有人能帮助我，它将不胜感激。我创建了一个的jsfiddle以及加入这里的代码：http://jsfiddle.net/t534v/3/

CSS：

body { 
    background-color: #f6f6f6; 
    font-family:'Abel', sans-serif; 
    font-size: 17px; 
    line-height: 23px; 
} 
*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
.container { 
    width: 580px; 
    background-color: #ffffff; 
    margin: 20px auto; 
    padding: 15px; 
} 
.postContainer { 
    width: 100%; 
    margin-bottom: 20px; 
} 
.postContainer h1 { 
    font-family:'Medula One', cursive; 
    font-weight: normal; 
    line-height: 46px; 
    font-size: 52px; 
    margin-bottom: 10px; 
} 
/************SLIDESHOW************/ 
.slideshow { 
    background-color: #DEDFCC; 
    width: 100%; 
    height: 500px; 
    position: relative; 
} 
.slideContainer { 
    background-color: #DEDFCC; 
    padding: 10px; 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
.slide { 
    width: 100%; 
    height: 500px; 
    text-align: center; 
    background-color: #C9B7B7; 
} 
.slideMiddle { 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
.slide img { 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
} 
.slideInfo { 
    width: 100%; 
    height: 80%; 
    padding: 10px; 
} 
.slideNav { 
    width: 100%; 
    padding: 10px; 
    background-color: #C9B7B7; 
    color: #DEDFCC; 
    position:relative; 
} 
.prevSlide { 
    width: 33.3%; 
    float: left; 
} 
.nextSlide { 
    width: 33.3%; 
    float: right; 
    text-align: right; 
} 
.slideCount { 
    width: 23.3%; 
    text-align: center; 
    position:absolute; 
    left:40%; 
} 
.slideCredit { 
    width: 100%; 
    font-style: italic; 
    font-size: 12px; 
} 
.fix { 
    clear: both; 
} 

HTML

<div class="container"> 

    <div class="postContainer"> 
    <h1>Liam Payne Hair Evolution</h1> 
    <p>Liam Payne has perhaps gone through the most hairstyle changes of any member of 1D! Check them out below!</p> 

       <div class="slideshow">   
       <div class="slideContainer"> 
        <div class="slide"> 
        <span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/2010.jpg"> 
        </div> 
        <div class="slideInfo"> 
        <p class="slideCaption"> 
         <p>2 
         Liam Payne Hair Evolution</p> 
         Please excuse these horrible captions.     </p> 
        <p class="slideCredit"> 
         Google     </p> 
        </div> <!--slideInfo end--> 
        <div class="fix"></div> 
       </div> <!--slideContainer end--> 
       <!--end if each if--> 


       <div class="slideContainer"> 
        <div class="slide"> 
        <span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/2011.jpg"> 
        </div> 
        <div class="slideInfo"> 
        <p class="slideCaption"> 
         <p>3 Liam Payne Hair Evolution</p> 
         I'm ashamed, but they're necessary...     </p> 
        <p class="slideCredit"> 
         Freebie     </p> 
        </div> <!--slideInfo end--> 
        <div class="fix"></div> 
       </div> <!--slideContainer end--> 
       <!--end if each if--> 


       <div class="slideContainer"> 
        <div class="slide"> 
        <span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/2012.jpg"> 
        </div> 
        <div class="slideInfo"> 
        <p class="slideCaption"> 
         <p>4 Liam Payne Hair Evolution</p> 
         Cutie patootie...     </p> 
        <p class="slideCredit"> 
         Getty     </p> 
        </div> <!--slideInfo end--> 
        <div class="fix"></div> 
       </div> <!--slideContainer end--> 
       <!--end if each if--> 


       <div class="slideContainer"> 
        <div class="slide"> 
        <span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/2013.jpg"> 
        </div> 
        <div class="slideInfo"> 
        <p class="slideCaption"> 
         <p>5 Liam Payne Hair Evolution</p> 
         Yup, lookin' fresh Liam!     </p> 
        <p class="slideCredit"> 
         Field     </p> 
        </div> <!--slideInfo end--> 
        <div class="fix"></div> 
       </div> <!--slideContainer end--> 
       <!--end if each if--> 


       <div class="slideContainer"> 
        <div class="slide"> 
        <span class="slideMiddle"></span><img src="http://onedirectionconnection.com/jquery/wp-content/uploads/2014/05/2014.jpg"> 
        </div> 
        <div class="slideInfo"> 
        <p class="slideCaption"> 
         <p>1 Liam Payne Hair Evolution</p> 
         Fresh new style!     </p> 
        <p class="slideCredit"> 
         Google     </p> 
        </div> <!--slideInfo end--> 
       </div> <!--slideContainer end--> 
       <!--end if each if--> 
      <!--end each--> 
     </div><!--slideshow end--> 
     <div class="slideNav"> 
      <div class="prevSlide"> 
       <i class="fa fa-chevron-left fa-2x"></i> 
      </div> 
      <div class="slideCount"></div> 
      <div class="nextSlide"> 
       <i class="fa fa-chevron-right fa-2x"></i> 
      </div> 
      <div class="fix"></div> 
     </div> 
    <!--end if--> 
    </div> <!--postContainer end--> 
</div> 

Answer 1

添加下面的代码行脚本

$(".slideshow").height($(".slideContainer").height()); 

更新js小提琴供您参考

http://jsfiddle.net/t534v/5/