垂直居中的元素具有最小的边距/填充？

Question

我在页面上有一个垂直居中的幻灯片，但是我想以某种方式添加一个“限制”，以便说说它在较小的屏幕上将页面向上滑动的高度。

http://www.visioncreativegroup.com.au/demos/bps/index.php/production/theatre

如果您调整窗口的大小，它将到达幻灯片位于导航栏和主徽标上方的位置。 基本上，一旦屏幕尺寸达到足够小的尺寸，它就必须停止在这些元素的底部。

这可能吗？

Answer 1

取消position: absolute; 来自.production-scroll类

也拆position: fixed; 如果不需要的话，从#sticky-footer

Answer 2

我将站点的幻灯片部分和标题部分分开。 因此，您有3个水平切片：页眉，幻灯片和页脚。 然后，您可以将幻灯片放到中间片段的中央，并且它永远不会越过标题。

Answer 3

尝试一下我为您设置的这个小演示，看看是否可以将项目中的HTML切换为类似内容：

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Demo</title>

            <!-- Insert below CSS here -->
            <!-- Insert JQuery here (http://code.jquery.com/jquery-latest.min.js) -->
            <!-- Insert below JS here -->
    </head>

    <body>
        <div id="shell">
            <div id="head">Header.</div>
            <div id="slideshow">Slideshow.</div>
            <div id="foot">Footer.</div>
        </div>
    </body>
</html>

CSS:主要用于演示）：

*{ margin: 0; padding: 0; }
div#head{ height: 200px; background: blue; }
div#foot{ height: 100px; background: red; }
div#slideshow{ height: 300px; background: green; }

JavaScript:

// Fix position initially and on each window resize.
$(window).resize(fix);
$(document).ready(fix);

function fix()
{
    // Work out position value.
    var base = $("div#slideshow").position().top;
    var middle = $(window).height() / 2;
    var hw = $("div#slideshow").height() / 2;

    // Position top either at the position determined above, or 0 if it bypasses the top of the page.
    var destination = Math.max(middle - base - hw, 0);
    $("div#shell").offset({ top: destination });
}

您可以在此处获取完整的工作示例 。