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 { padding: 20px 30px 0 30px; height:450px;}

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

OR Code Snippet

* { 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>

幻灯片重叠页脚

1 个答案: