Javascript 位于底部的元件&；从底部切断

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

我厌倦了flexbox解决方案： .. 它几乎可以工作，除了低分辨率，块从顶部隐藏，底部仍然可见

我还尝试了另一种解决方案： .. 这样可以使顶部始终可见，但只会完全隐藏底部，包括其他两个块

我甚至尝试了一个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;

以及您的#卡id：

overflow: hidden;

但在chrome 35+上不起作用：

---

我的最佳选择是为chrome使用jquery插件：

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

var vh=Math.max（document.documentElement.clientHeight，window.innerHeight | 0）；
var topHeight=document.getElementById（'top'）。offsetHeight；
函数getHeight（元素）{
var elementHeight=document.getElementsByClassName（element）[0].offsetHeight；
var offsetTop=vh-（顶部高度+元件高度）；
var cardsContainerHeight=document.getElementById（'cards'）。offsetHeight；
if（元件高度

在第一个示例中，您是否尝试移除

#卡片{flex flow:row wrap；}

？@cari刚刚尝试过，仍然是一样的。我没有时间在睡觉前编写适当的解决方案，但我觉得CSS媒体选择器可能正是您所寻找的。看看你是如何做到这一点的。在您的情况下，只需将块设置为

display:none

I希望

top

可见。只是隐藏块从底部向上，而他们仍然在底部。SRY我不知道你的意思是“隐藏块从底部向上”在我的第一个JSB链接，你看到文本“顶端”在中间div？但你确实看到了文本“底部”，因为当高度受到限制时，这些块会从上方隐藏，而不是从下方隐藏。。希望这就是你想要的不，第二个链接已经显示了一个位于底部的块的示例，并且从下面切断，但是，由于最大块的高度，第一个和第三个块在视口中不可见。