javascript - 垂直对齐内容 JavaScript

Question

嘿，

基本上我想要实现的是垂直对齐一些内容，在我的案例名称和工作中。

这里的问题是，当调整窗口大小时，我希望内容保留在中间。 我找到了一个小脚本，但无法让它工作，仍在学习 JS 的基础知识。

我的标记如下:

1. 导航
2. 垂直内容
3. 页脚(position:absolute；底部:0；)//与底部对齐。

我创建了一个 JSFiddle ( http://jsfiddle.net/marianstroiu/khm52p0a/1/ )，所以你能明白我在说什么吗？

function getWindowHeight() {
            var windowHeight = 0;
            if (typeof(window.innerHeight) == 'number') {
                windowHeight = window.innerHeight;
            }
            else {
                if (document.documentElement && document.documentElement.clientHeight) {
                    windowHeight = document.documentElement.clientHeight;
                }
                else {
                    if (document.body && document.body.clientHeight) {
                        windowHeight = document.body.clientHeight;
                    }
                }
            }
            return windowHeight;
        }
        function setContent() {
            if (document.getElementById) {
                var windowHeight = getWindowHeight();
                if (windowHeight > 0) {
                    var contentElement = document.getElementById('v-content');
                    var contentHeight = contentElement.offsetHeight;
                    if (windowHeight - contentHeight > 0) {
                        contentElement.style.position = 'relative';
                        contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
                    }
                    else {
                        contentElement.style.position = 'static';
                    }
                }
            }
        }
        window.onload = function() {
            setContent();
        }
        window.onresize = function() {
            setContent();
        }

谢谢!

Answer 1

您正在使用引导粘性页脚模板，该模板将下边距和页脚添加到正文元素，因此您应该从窗口高度中减去 2 * 60 像素。这里修改为jsfiddle