对于我直接使用 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 解决方案。
最佳答案
试试这个(未测试,目前无法测试我所在的位置):
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');
}
});
关于javascript - 根据内容高度使用 Jquery 禁用基于 CSS 转换的居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31440950/