Make a fixed position of the element, but keep track of the page scrolling if the content is too large

Question

See this web page .

• First, try scrolling it, make sure the left panel remains fixed.
• Resize the window so that not all the contents of the left panel are displayed. Now scroll. This time the left panel is not fixed.

There is jquery on this page that calculates the height of the left column, compares it with the height of the window, and then makes the position of the left column fixed or absolute.

However, I am wondering if it is possible to achieve something similar only through HTML and CSS, without using jQuery or the like.

Any suggestions? In short, I'm looking for a panel with content that remains fixed but scrolls if the content overflows. But scrolling should be along with the whole page.

Answer 1

You can use media queries to direct CSS to specific screen sizes (and other things) so you can use one stylesheet if the screen is too small. I am not an expert, so there are no examples, but look here http://css-tricks.com/css-media-queries/ . Sorry but guess what you got it :)

Edit: The working result is the following:

#leftnav { /* default look */ width: 300px; position: fixed; top:0; height: 100%; } /* set the size at which the content is clipped and we cannot have fixed position */ @media all and (max-height: 500px) { /* things inside here will only have an effect if the browser window shows less than 500 px in the height, so here I apply the special rules */ #leftnav { position: absolute; height: auto; /* etc.. */ } }