垂直对齐内容 JavaScript

Question

喂，

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

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

我的标记如下：

1. 导航
2. 垂直内容
3. 页脚（位置：绝对；底部：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

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