垂直对齐内容JavaScript

Question

HY，

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

这里的问题是，在调整窗口大小时，我希望内容保留在中间。 我找到了一个小脚本，但仍然无法学习，仍然在学习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

您正在使用引导程序粘性页脚模板，该模板在主体元素上添加了底部边距和页脚，因此应从窗口高度中减去2 * 60像素。 这是修改的jsfiddle