javascript - 根据内容高度使用 Jquery 禁用基于 CSS 转换的居中

Question

对于我直接使用 CSS 和 Foundation 5 设计的网站，当内容区域高于浏览器窗口时，我将所有内容垂直居中放置在视口(viewport)中间。

我找到了一个很好的pure CSS solution效果很好。当内容区域足够小以完全适合视口(viewport)而无需滚动折叠时，我对当前行为感到非常满意。我相当确定当内容足够长可以滚动时，我不需要或不想要任何类型的垂直居中。

问题是当屏幕上放不下太多内容时，CSS 会裁掉标题，导致无法向上滚动以查看内容的顶部。

我改编自 davidwalsh.name 的 CSS 使用转换将容器的高度从顶部向下放置 50% 后升高一半。

#non-framework-container {
    height: 100%;
    width: 100%;
}
#non-framework-wrapper {
    height: auto;
    width: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

这适用于 Foundation 类周围的这两个嵌套容器。

<div id="non-framework-container">
    <div id="non-framework-wrapper">
        <header class="row">
            [...]
        </header>
        [...]
    </div>
</div>

当内容(特别是#non-framework-container)比视口(viewport)高时，我想禁用 CSS。我希望它会像这段 JQuery 一样简单:

$(document).ready(function) {
    if ( $("#non-framework-container").height() > $(window).height() ) {
        $("#non-framework-wrapper").css("position":"static", "top":"0", "transform":"none");
    }
});

不幸的是，我的脚本没有做任何事情，无论内容的数量或浏览器的大小(也无论我是将它加载到 head 标签还是 body 标签的底部)。

我喜欢 CSS 转换方法的工作方式，所以我不愿意尝试纯 JavaScript 解决方案。

Answer 1

试试这个(未测试，目前无法测试我所在的位置):

HTML:
<div id="non-framework-container">
    <div id="non-framework-wrapper">
        <header class="row"> 
            <h1>Your mom makes the best pizza</h1>
        </header>
    </div>
</div>


CSS:
#non-framework-container {
    height: 100%;
    width: 100%;
}
.transform {
    height: auto;
    width: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


JAVASCRIPT:
var div = $("#non-framework-wrapper").height();
var winSize = $(window).height();

$(document).ready(function() {
    if (div < winSize) {
        $("#non-framework-wrapper").addClass('transform');
    } else {
        $("#non-framework-wrapper").removeClass('transform');
    }
});