当我调整浏览器的大小时，css容器没有调整

Question

我有一个容器，它包含图像滑块并且图像响应，但是当我调整浏览器的大小时，我的滑块和下一个div容器之间的差距很大 就是它？

<!-- Image Slider --> 
<div class="container"> 
    <div id="slider"> 
     <div id="left-side-slider"> 
      <img src="img/test.jpg" alt=""> 
     </div> 
     <div id="right-side-slider"> 
      <img src="img/precher.jpg" alt=""> 
      <img src="img/sermons.jpg" alt=""> 
     </div> 
    </div> 
</div>  

<!-- End of Image Slider --> 

<!-- Welcome Message --> 
<div class="container"> 
    <div id="welcome-message"> 
     <h1><span></span> WELCOME TO OUR CHURCH</h1> 
     <article> 
      Our Mission is to glorify God, proclaiming and following Christ, in the power of the Holy Spirit. 
     </article> 
    </div> 
</div> 

<!-- End of Welcome Message --> 

的CSS部分是

.container{ 
    max-width: 960px; 
    margin: 0 auto; 
    padding: 0px 20px; 
} 


/* Image Slider section */ 
#slider { 
    margin-top: 10px; 
    min-height: 350px; 
} 

#left-side-slider { 
    width: 72%; 
    float:left; 
    margin-right: 2%; 
} 

#left-side-slider img , #right-side-slider img { 
    width: 100%; 
} 

#right-side-slider { 
    width: 25%; 
    float: left; 
} 

/* Welcome Message */ 
#welcome-message { 
    background-color: @bg-color; 
    height: 200px; 
    margin-top: 1%; 
} 

    #welcome-message h1 { 
    padding-left: 50px; 
    padding-top: 30px; 
    font-family: @Oswald; 
    font-size: 35px; 
    color: @white; 
    } 

    #welcome-message span { 
    border-left: 1px solid @white; 
    padding-right: 15px; 
    } 

    #welcome-message p { 
    font-family: @OpenSans; 
    font-size: 32px; 
    color: @light-gray; 
    padding-left: 50px; 
    } 

Answer 1

由于您使用min-height: 350px;为

#slider { 
    margin-top: 10px; 
    min-height: 350px; 
} 

只是删除min-height

工作的jsfiddle：http://jsfiddle.net/tzfzjyp8/