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;
    }
}

[编辑]显然不是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?

我最好的选择是使用jquery插件进行chrome：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");
}();

位于底部的元素＆amp;从底部切断

2 个答案: