Fixed Position
Extends Beyond Bottom of Page

Question

I have a

which is basically a shopping cart which I want to have fixed to the right as the user scrolls through content. I'm using Bootstrap and have this...


  stuff

The problem is that if .stuff gets tall, the height of

gets to the point where the bottom of it is off the bottom of the page of the browser window. Like this...



some stuff

      begin
      




































      I can't see this!!!

Is there a way to fix this?

user_3713790 · Answer

Here's an example using max-height:100vh. I've removed the wrapping .row as it adds extra padding to the parent div which causes the horizontal scrollbar, which hides the last line of text beneath.

.wrap{
position:relative;
padding:0;
margin:0;
}

.order_panel{
  position:fixed;
  right:0;
  top:0;
  max-height:100vh;
  overflow-y:auto;
  box-sizing:border-box;
  z-index:10;
}



  some stuff
  
      begin
      




































      I can't see this!!!

user_5641669 · Answer

Use overflow-y: scroll; on it, plus limit its height to a little bit less than the container/window height, like height: calc(100% - 2em);, or height: calc(100vh - 2em);, if the percentage doesn't work. (depends on the height settings of the container element). And adjust/fine-tune the 1.8em in the calc part as you need it.

#my_order {
  max-height: calc(100% - 1.8em);
  overflow-y: scroll;
}



  some stuff
  
    begin
    



































 I can't see this!!!

Fixed Position <div> Extends Beyond Bottom of Page

2 Answers