How to get a div to slide up from the bottom of the page using CSS

Question

I have a div with the following classes:

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    overflow: au         


        

Answer 1

One possibility is to transition both the top (from 100% to 0) and either the height or max-height (from 0 to 100%). (vw and vh would be better than %, but IE, as usual, prefers not to.)

.slider {
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  overflow: hidden;
  transition: all 1s;
}

.slider.close {
  top: 100%;
  height: 0;
}

Demonstration here:

$('.trigger, .slider').click(function() {
  $('.slider').toggleClass('close');
});

.slider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  background-color: #000; color: #FFF;
  transition: all 1s;
}

.slider.close {
  top: 100%;
  height: 0;
}

  Bring it

Leave it

(You could omit the 'height' animation by instead hiding the slider when it is "closed", but this would potentially change the page height during the animation causing the scrollbar to move around.)