Scrollable fixed div

Question

Scrollable fixed div

I am facing an issue with a fixed filter system that is currently positioned at the bottom of the screen. My intention is to animate it popping up later on:

<nav></nav>

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

However, when the window is made smaller, the filter system ends up overlapping the navigation bar. I am looking for a way to prevent this overlap and want the filter system to align with the base of the nav bar, allowing users to scroll through the options vertically.

I have attempted using relative positioning to place the filter system below the nav bar so it does not go over the top, but then it is not aligned with the bottom of the window.

My goal is to create a filter system that always stays at the bottom of the screen and allows users to scroll through the list if it extends beyond the viewport height or if the window size is small enough. Is there a CSS-only solution to achieve this?

html css

Answer 1

Answer №1

To modify this, media queries would need to be utilized. Here is an example:

@media screen and (max-height: 200px) {
  .filter {
    position: relative;
  }
}

Answer 2

To modify this, media queries would need to be utilized. Here is an example:

@media screen and (max-height: 200px) {
  .filter {
    position: relative;
  }
}

Scrollable fixed div

Answer №1

Similar questions

Mobile users are experiencing trouble viewing a non-responsive website on their devices in a responsive

Using HTML5 to implement a progress bar that updates on click

Creating a Circular Design with Text at the Center Using CSS

What is the best way to utilize webpack for transferring files to the distribution directory?

Using AJAX to showcase data from a table in a database using the <select> tag but with an unfinished submit process

Malfunction detected in JavaScript shopping cart functionality

Unusual default Nav bar positioning

A function that listens for the onmouseover event and updates the image source of an HTML img element

How to automatically scroll to the bottom using jquery/css

Creating a legitimate svg element using javascript

How can I arrange an array of strings with dates in C# or use ordering functionality in AngularJS?

Dynamically Loading CSS files in a JQuery plugin using a Conditional Test

Here's the secret to completely getting rid of emoji as symbols

Is it deemed as an anti-pattern to establish directives for styling?

What is the best way to apply custom css to a Google Plus share button within an iframe?

Angular2's hidden feature isn't functioning properly

Detecting collisions with other objects in HTML/CSS/JavaScript while animating objects

Learn how to trigger an animation when hovering over an element, and how to pause it once the hover is

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

Attempting to execute JavaScript within HTML files that have been incorporated using Angular