幻燈片重疊頁腳

我正在處理響應頁面，並嘗試了一切（包括搜索功能），但頁腳在內容/幻燈片下保持滑動。我究竟做錯了什麼？幻燈片重疊頁腳

<div id="wrapper"> 
<div id="content"> 

    <div class="slideshow"> 
     <img src="img/1.JPG" width="850" /> 
     <img src="img/2.JPG" width="850" /> 
     <img src="img/3.JPG" width="850" /> 
    </div> <!-- Ends Slideshow --> 

</div> <!-- Ends Content --> 

<div id="footer"> 
</div> 
</div> 

Style-sheet: 

#wrapper { width: 900px; margin: 0 auto 0 auto; } 
#content { padding: 20px 30px 0 30px; height: auto; } 
.slideshow { position:relative; height:auto; max-width: 100%; margin-bottom: 10px; } 
.slideshow img { max-width:100%; height: auto; } 
#footer { padding: 20px 0 0 0; }

來源

2014-12-05 n_ck

我看不出它與該代碼重疊。請參閱：http://jsfiddle.net/0qe47o5e/ – 2014-12-05 16:37:02

謝謝，我更新了您的Jsfiddle以匹配我當前的代碼：http://jsfiddle.net/0qe47o5e/1/ – 2014-12-05 16:44:46

已解決。看到我的答案（它已更新）。祝你有美好的一天。 – 2014-12-05 16:56:56

沒有辦法使頁面上的絕對元素佔用空間，因爲它們不按定義來做。但是，您可以給#content修正一個高度。

既然你知道（根據在評論你的jsfiddle）的圖像的高度，這樣你就可以添加height:450px;您#content因爲height:auto不會看到你的absolute定位元素的任何高度。

#content { padding: 20px 30px 0 30px; height:450px;}

的jsfiddle：http://jsfiddle.net/0qe47o5e/3/

或代碼片段

* { margin: 0; padding: 0; } 
 
#wrapper { width: 900px; margin: 0 auto 0 auto; } 
 
#content { padding: 20px 30px 0 30px; height: 450px; } 
 
.slideshow { position:relative; height:100%; max-width: 100%; margin-bottom: 10px; } 
 
.slideshow img { max-width:100%; } 
 
#footer { padding: 20px 0 0 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
<div id="content"> 
 

 
    <div class="slideshow"> 
 
     <img src="img/1.JPG" width="850" height="450" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;" /> 
 
     <img src="img/2.JPG" width="850" height="450" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0;" /> 
 
     <img src="img/3.JPG" width="850" height="450" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0;" /> 
 
    </div> <!-- Ends Slideshow --> 
 

 
</div> <!-- Ends Content --> 
 

 
<div id="footer"> Footer HERE 
 
</div> 
 
</div>

來源

2014-12-05 16:48:36

幻燈片重疊頁腳

回答

相關問題