How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport

Question

I have a div positioned fixed on the left side of a web page  containing menu and navigation links  It has no height set from css  the content determines the height  the width is fixed  The problem is that if the content is too much  the div will be larger than the window s height  and part of the content will not be visible   Scrolling the window doesn t help  since the position is fixed and the div won t scroll    I tried to set overflow-y auto  but that doesn t help either  the div doesn t seem to notice that part of it is outside of the window   How can I make it s contents scrollable only  if needed  if the div hangs out of the window

User · Answer

Here is the pure HTML and CSS solution    We create a container box for navbar with  position  fixed  height 100   Then we create an inner box with height  100   overflow-y  scroll  Next  we put out content inside that box    Here is the code    x000D   x000D   nav-box  x000D          position  fixed  x000D          border  1px solid  0a2b1d  x000D          height 100   x000D       x000D      inner-box  x000D          width  200px  x000D          height  100   x000D          overflow-y  scroll  x000D          border  1px solid  0A246A  x000D        x000D       tabs  x000D          border  3px solid chartreuse  x000D          color darkred  x000D        x000D       content-box p  x000D        height 50px  x000D        text-align center  x000D        x000D   lt div class  nav-box  gt  x000D     lt div class  inner-box  gt  x000D       lt div class  tabs  gt  lt p gt Navbar content Start lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content lt  p gt  lt  div gt  x000D       lt div class  tabs  gt  lt p gt Navbar content End lt  p gt  lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   lt div class  content-box  gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D     lt p gt Lorem Ipsum lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Link to jsFiddle

User · Answer

I m presenting this as a workaround rather than a solution  This may not work all the time  I did it this way as I m doing a very basic HTML page  for internal use  in a very bizarre environment  I know there are libraries like MaterializeCSS that can do really nice nav bars   I was going to use them  but it didn t work with my environment     lt div id  nav  style  position fixed float left overflow-y hidden width 10    gt  lt  div gt   lt div style  margin-left 10  float left overflow-y auto width 60  word-break break-all word-wrap break-word   id  content  gt  lt  div gt

User · Answer

You probably need an inner div  With css is     fixed      position  fixed     top  0     left  0     bottom  0     overflow-y  auto     width  200px     your value    inner      min-height  100

User · Answer

For your purpose  you can just use  position  absolute  top  0     and it still be resizable  scrollable and responsive

User · Answer

Add this to your code for fixed height and add one scroll    fixedbox       max-height  auto      overflow-y  scroll

User · Answer

Try this on your position fixed element   overflow-y  scroll  max-height  100

User · Answer

The link below will demonstrate how I accomplished this  Not very hard - just have to use some clever front-end dev     lt div style  position  fixed  bottom  0   top  0    gt        lt div style  overflow-y  scroll  height  100    gt          Menu HTML goes in here       lt  div gt    lt  div gt    http   jsfiddle net RyanBrackett b44Zn

User · Answer

This is absolutely doable with some flexbox magic  Have a look at this pen   You need css like this   aside     background-color  cyan    position  fixed    max-height  100vh    width  25     display  flex    flex-direction  column     ul     overflow-y  scroll     section     width  75     float  right    background  orange      This will work in IE10

User · Answer

You probably can t  Here s something that comes close  You won t get content to flow around it if there s space below    http   jsfiddle net ThnLk 1289   stuck       position  fixed      top  10px      left  10px      bottom  10px      width  180px      overflow-y  scroll      You can do a percentage height as well   http   jsfiddle net ThnLk 1287    stuck       max-height  100

[html] How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

Examples related to html

Examples related to css

Examples related to css-position