Elements positioned at the bottom & cut-off from bottom

Question

I have three blocks, I want them positioned at the bottom always, regardless of the viewport height, and when there's not enough height to show all of it, I want them to hide from the bottom, NOT the top.

I tired a flexbox solution: http://jsbin.com/kutipequxe/1/edit?css,output .. it almost works, except on low resolutions, the blocks hide from top, bottom remains visible.

I also tried another solution: http://jsbin.com/ruhigijeba/1/edit?css,output .. well this keeps the top always visible, but just hides the bottom altogether, including the other two blocks.

I even tried a JS solution:

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");

... but it still hides the blocks from top!

in the first example, did you try removing `#cards { flex-flow: row wrap; }` ? — cari, Jan 09 '15 at 10:30
I don't have time to write a proper solution before heading to bed, but I feel like CSS media selectors might be just what you're looking for. Check out http://www.w3schools.com/cssref/css3_pr_mediaquery.asp for an idea on how you could do this. In your case you would just set the blocks to `display: none` — 0x24a537r9, Jan 09 '15 at 10:43

score 1 · Answer 1 · edited May 23 '17 at 12:11

1

try it with CSS media queries:

At the end of your CSS just add

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

[edit] appearently thats not what oyu were asking for.

so... in your second jsbin example, add this to your .cards class:

position: sticky;
bottom: 0;

and to your #cards id:

overflow: hidden;

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

it does not work on chrome 35+ though: Why doesn't position: sticky work in Chrome?

my best bet would be to use a jquery plugin for chrome: https://github.com/filamentgroup/fixed-sticky

edited May 23 '17 at 12:11

Community

1
1

answered Jan 09 '15 at 10:45

cari

2,251
2
18
27

I want `top` to be visible. Just hide the blocks from the BOTTOM up while they're still positioned at the bottom. – eozzy Jan 09 '15 at 10:46
sry im not sure what you mean by "hide the blocks from the BOTTOM up" – cari Jan 09 '15 at 10:47
On my first jsbin link, do you see the text "top" in the middle div? But you do see the text "bottom" because when the height is limited, the blocks are being hidden from above, not below. – eozzy Jan 09 '15 at 10:48
look at my edited answer.. hope thats what you were asking for – cari Jan 09 '15 at 11:15
No, the second link already shows an example of blocks that are positioned at the bottom, and are cut-off from below, however, the 1st and 3rd blocks are not visible on the viewport, due to the height of the largest block. – eozzy Jan 09 '15 at 11:17
sry missed something, look now – cari Jan 09 '15 at 11:20
Nope, still the same. First and third blocks are not visble on the viewport. – eozzy Jan 09 '15 at 11:23
did you click on my jsbin example? they are visible in my firefox.. ok funny enough, it does not work in chrome. just tested. – cari Jan 09 '15 at 11:24

score 0 · Accepted Answer · answered Jan 21 '15 at 05:44

Ended up using Javascript and CSS media queries to achieve the desired results:

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

2 Answers2