-3

JS Fiddle

I have a fixed filter system positioned at the bottom of the screen (I intend to animate this popping up later):

<nav></nav>

<ul class="filter">
    <li>filter option</li>
    <li>filter option</li>
    ..... 
</ul>

When you make the window smaller, the filter system goes over the nav. How can I prevent the filter system from going over the nav, I want it to line up with the base of the nav and then allow the user to scroll up and down it.

I've tried relatively positioning the filter system below the nav - this way it never goes over the top, but it's not aligned to the bottom of the window.

So I would like a filter system that sits at the bottom of the screen, if it's tall enough or the users window is small enough, I want the user to be able to scroll the filter list.

Is this possible with just CSS?

panthro
  • 22,779
  • 66
  • 183
  • 324
  • can you provide a more accurate fiddle, I can't reproduce your issue, or maybe I don't understand what you mean. changing the size of the window isn't doing anything for me – Abdul Ahmad Apr 14 '15 at 15:36
  • @AbdulAhmad make your browser window smaller in height, you'll see the filter system goes above the nav. – panthro Apr 14 '15 at 15:38
  • @AbdulAhmad or check https://jsfiddle.net/cg0cekh5/1/ – panthro Apr 14 '15 at 15:38
  • so do you want the nav to be on top? – Abdul Ahmad Apr 14 '15 at 15:47
  • @AbdulAhmad i want the filter system not to go beyond the nav – panthro Apr 14 '15 at 15:53
  • I'm not sure if this is possible with just css, either use media queries like they suggested, or you need some javascript event to fire when the window resizes and you can change the css. or you can give it a height of 70% and put `overflow-y:scroll` on it – Abdul Ahmad Apr 14 '15 at 15:53

1 Answers1

-1

In order to change this you will have to use media queries for example:

@media screen and (max-height: 200px) {
  .filter {
    position: relative;
  }
}
Snake
  • 1,157
  • 1
  • 10
  • 21