jquery - 幻灯片重叠页脚

Question

我在响应式页面上工作，并尝试了所有方法(包括此处的搜索功能)，但页脚一直在内容/幻灯片下方滑动。我做错了什么？

<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; }

Answer 1

没有办法让绝对元素在页面上占据空间，因为它们没有按照定义这样做。但是，您可以给 #content 一个高度来修复。

因为您知道图像的高度(根据评论中的 jsfiddle)，所以您可以将 height:450px; 添加到您的 #content 因为 height:auto 不会在您的 absolute 定位元素上看到任何高度。

#content { 填充:20px 30px 0 30px;高度: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>