【问题标题】：Showing content below Supersized slideshow在超大幻灯片下方显示内容
【发布时间】：2012-12-17 22:03:26
【问题描述】：

我正在尝试在行为正常的全屏幻灯片下方显示内容。只有当您向下滚动时，才会显示剩余的内容。所以加载时幻灯片的高度和宽度仍应为 100%。

我尝试放置一个与浏览器高度相同大小的页边距顶部（使用 js 检测）并将幻灯片位置设置为绝对位置，但这不起作用...

很想听听您对此的看法，非常感谢！

示例：http://www.fabrikgrafik.be/slider/ （我正在尝试在不丢失幻灯片功能的情况下获取幻灯片下方的红色内容 div）

【问题讨论】：

将幻灯片控件和背景放在一个 div 中，设置为 position: fixed; 和 z-index: -1

标签： jquery slideshow supersized

【解决方案1】：

真的很简单，除了添加以下两行jQuery之外，不要改变任何一分钟前的内容：

// made edit to hide content till slideshow is rdy
$("#content-wrapper").css("margin-top", $("#supersized").height()).show();
$(window).resize(function(e) { $("#content-wrapper").css("margin-top", $("#supersized").height()); });

updated jsFiddle

另外，您可以更改此 CSS：

#controls-wrapper { display: none; position: absolute; } /* from fixed */

【讨论】：

谢谢，但这不是我的问题。这是我能做到的:)。问题是，我希望红色（内容）div 从幻灯片结束的地方开始。所以现在它加载了全宽和全高，当我滚动它时，它正是我想要的。但红色 div 应该从幻灯片下方开始，而不是在幻灯片上方。所以我认为我必须在“内容包装器”上放置一个与浏览器高度相同大小的边距顶部。但我不确定如何做到这一点，以及这是否是正确的解决方案。再次感谢
做了几个改动，看起来很棒
非常感谢！我真的很想知道这个:)。这正是我想要完成的。很高兴我不必改变我的设计。
Jquery 不是必需的，它是一个简单的 css 解决方案...jsfiddle.net/videsignz/9wCHZ
@VIDesignz 由于其他一些因素在他的视线中不起作用，但 jquery 简短而简单。我已经尝试了一个纯 css 更改，但它涉及更改几个项目，jQuery 更容易

【解决方案2】：

我想通了....css样式

 #redDivId {position:absolute; top:100%;}

看看这个FIDDLE

【讨论】：

非常感谢，这确实是真的，也是我想要完成的。但现在只有红色 div 应该从幻灯片底部结束的位置开始。就在“折叠”之下。而这是我无法成功的地方。
我没有看到你的js来定位页面上的红色div？它在哪里？
我看到了这个 但没有 margin-top 声明。
确实不，我把它拿出来是因为我做错了:)。但我也不确定这是否是正确的方法，也许有一个我没有看到的纯 CSS 解决方案。
@fabrikgrafik 老兄，你不需要 jquery ！