元素位于底部并从底部截断答案

【问题标题】：Elements positioned at the bottom & cut-off from bottom元素位于底部并从底部截断
【发布时间】：2015-01-21 13:44:52
【问题描述】：

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

我厌倦了 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");

...但它仍然从顶部隐藏块！

【问题讨论】：

在第一个示例中，您是否尝试删除 #cards { flex-flow: row wrap; } ？
@cari 刚试过，还是一样。
我没有时间在睡觉前写一个合适的解决方案，但我觉得 CSS 媒体选择器可能正是您正在寻找的。查看w3schools.com/cssref/css3_pr_mediaquery.asp，了解如何做到这一点。在您的情况下，您只需将块设置为 display: none

标签： javascript html css flexbox

【解决方案1】：

尝试使用 CSS 媒体查询：

在你的 CSS 末尾添加

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

[edit] 显然这不是 oyu 所要求的。

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

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

【讨论】：

我希望 top 可见。只需将位于底部的块从底部隐藏起来即可。
抱歉，我不确定您所说的“从底部隐藏块”是什么意思
在我的第一个 jsbin 链接上，你看到中间 div 中的文本“top”了吗？但是您确实会看到“底部”文本，因为当高度受限时，块会从上方隐藏，而不是从下方隐藏。
看看我编辑的答案..希望这就是你的要求
不，第二个链接已经显示了位于底部的块示例，并且从下方截断，但是，第一个和第三个块在视口上不可见，因为最大块的高度。

【解决方案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");
}();

【讨论】：