元素位于底部并从底部截止

Elements positioned at the bottom & cut-off from bottom

本文关键字：底部 于底部 元素      更新时间：2023-09-26

我有三个块，我希望它们始终位于底部，无论视口高度如何，当没有足够的高度来显示所有内容时，我希望它们从底部隐藏，而不是顶部。

我厌倦了弹性框解决方案：http://jsbin.com/kutipequxe/1/edit?css,output..它几乎可以工作，除了在低分辨率下，块从顶部隐藏，底部仍然可见。

我还尝试了另一种解决方案：http://jsbin.com/ruhigijeba/1/edit?css,output..好吧，这使顶部始终可见，但只是完全隐藏了底部，包括其他两个块。

我什至尝试了一个JS解决方案：

var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var topHeight = document.getElementById('top').offsetHeight;
console.log('Viewport Height: ' + vh);
function getHeight(element) {
    console.log(document.getElementsByClassName(element));
    var offsetHeight = document.getElementsByClassName(element)[0].offsetHeight;
    console.log('offsetHeight: ' + offsetHeight);
    var marginTop = vh - (topHeight + offsetHeight);
    console.log('marginTop: ' + marginTop);
    document.getElementsByClassName(element)[0].style.marginTop = marginTop + "px";
}
getHeight("card-1");
getHeight("card-2");
getHeight("card-3");

。但它仍然从顶部隐藏了块！

尝试使用CSS媒体查询：

在 CSS 结束时，只需添加

@media screen and (max-height: 120px) {
    div#top {
        display: none;
        height: 0px;
    }
    #main {
      height: 100vh;
    }
}

[编辑]看来这不是OYU所要求的。

所以。。。在第二个 JSBin 示例中，将此添加到 .cards 类中：

position: sticky;
bottom: 0;

并发送到您的 #cards ID：

overflow: hidden;

http://jsbin.com/zijedofija/1/

不过，它不适用于Chrome 35+：为什么在Chrome中不起作用？

我最好的选择是使用Chrome的jQuery插件：https://github.com/filamentgroup/fixed-sticky

最终使用 Javascript 和 CSS 媒体查询来实现预期的结果：

var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var topHeight = document.getElementById('top').offsetHeight;
function getHeight(element) {
    var elementHeight = document.getElementsByClassName(element)[0].offsetHeight;
    var offsetTop = vh - (topHeight + elementHeight);
    var cardsContainerHeight = document.getElementById('cards').offsetHeight;
    if (elementHeight < cardsContainerHeight) {
        document.getElementsByClassName(element)[0].style.top = offsetTop + "px";
    }
}
var resize = function(event) {
    getHeight("card");
}();
相关文章：