位于底部并从底部截断的元素

Question

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

我厌倦了 flexbox 解决方案：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");

...但它仍然隐藏了顶部的方块！

Answer 1

尝试使用 CSS 媒体查询：

在 CSS 的末尾添加

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

[edit] 显然那不是 oyu 想要的。

所以...在您的第二个 jsbin 示例中，将其添加到您的 .cards class:

position: sticky;
bottom: 0;

以及您的#cards id：

overflow: hidden;

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

它不适用于 chrome 35+ 虽然：Why doesn't position: sticky work in Chrome?

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

Answer 2

最终使用 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");
}();

位于底部并从底部截断的元素

Elements positioned at the bottom & cut-off from bottom

html

javascript

css

flexbox