Troubleshooting the scrolling problem with dynamic content inside a stationary container

Within my fixed container, I have a dynamic list (ul) of items with a title at the top.

However, it seems that the presence of the title is causing an issue with scrolling. The bottom part of the list is being pushed below the view port, making it impossible to scroll to the last item.

You can check out my HTML & CSS skeleton here to see the problem in action.

This is my HTML structure:

<div class="menu-wrap">
  <div style="height:100px">
        <div>my items</div>
  </div>
  <div class="menu">
        <div class="icon-list">
            <ul>
                 <li class="playerBox">
                    <div class="topRect">
                        item 1
                    </div>
                </li>

                <!-- unknown number of items -->

                <li class="playerBox">
                    <div class="topRect">
                        item n
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

If anyone has any suggestions on how to display the list scroll bar properly so users can reach the last item easily, please let me know.

Thank you, Idan

htmlcssscrollbar

Answer №1

Have you considered adjusting the CSS for .menu-wrap by changing 

position: fixed;
to 
position: relative;
to resolve the scrolling issue? Keep in mind that this change may impact your layout.

Alternatively, you could experiment with 

position: absolute;
, but be aware that it might not render correctly.

If those options are not viable, you can modify the height style of your title div to a percentage like 15%: 

<div style="height:15%">
        <div>my items</div>
    </div>
Afterwards, adjust the menu height to occupy the remaining percentage (not 100%): 
.menu {
    height: 85%;
    overflow-y: auto;
}
The issue arises because both the title div and menu div share the same container parent. Therefore, if the title div took up 100px, that amount would be deducted from the menu's 100%.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to modify the background shade of a bootstrap column

I am looking to customize the background color of a single column within a bootstrap row, along with applying padding to the row. Please refer to the screenshot provided below for clarification. https://i.sstatic.net/S9Lfx.png <div class="cont ...

htmlcssbootstrap-4

Children of the Vue component are always unreachable

Take a look at the following code snippet: <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"> <script type="text/javascript" src="../../node_module ...

javascripthtmlvue.js

Confirming the accuracy of multiple fields in a form

Looking for help with validating both password and email fields on a registration form. I've successfully implemented validation for passwords, but need assistance adding validation for the email section as well. Can both be validated on the same form ...

javascripthtml

Viewing HTML in Gmail shows the raw code with tags, making it easy to read with no fancy CSS or styling

This is a simple HTML document with test content that was sent in the message body by a mailing server to a Gmail account: <html> <body> Some text goes here <br><br> User who applied: Username <br> User's email: < ...

htmlgmail

Issue with internal URI directory structure affecting SEO mod_rewrite

I recently implemented a mod_rewrite rule on my website that transforms example.com/en/about/topic into example.com/en/view.php?p=pages/about/topic.php The specific rule I used is: RewriteRule ^en/([a-zA-Z0-9/]+)$ en/view.php?p=pages/$1.php In view.p ...

htmlregex.htaccessmod-rewriteseo

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

javascripthtmlcssnode.jsjson

How can I reference a local file in HTML using Node.js?

I am currently setting up a file to run app.js var express = require('express') var app = express(); var router = express.Router(); var path = __dirname + '/views/'; router.get("/",function(req,res){ res.sendFile(path + "index.html" ...

javascripthtmlcssnode.jsexpress

Is it possible to dynamically load a specific div when the page loads, relying on the

I am using JQuery SlideUp and slideDown methods to toggle the visibility of panels. How can I load or display the first record's contact information as a default? Currently, it loads blank because I set the panel's display property to none: < ...

javascriptjqueryhtmlcss

Styling the content within Template Strings is not supported by VSCode

Recently, I've noticed that there are two scenarios in which my VSCode doesn't properly style the content within my template strings. One is when I'm writing CSS in a JavaScript file, and the other is when I'm fetching data from GraphQL ...

javascriptcssreactjsvisual-studio-codegraphql

Using bootstrap can alter the positioning of elements that have margins relative to other elements

After exploring suggestions from my previous post on Stack Overflow, I have implemented a modified version to animate drag movements. While the HTML5 draggable attribute can achieve dragging, its limitations and side effects are something I aim to avoid. ...

javascripthtmlcssbootstrap-5

Obtain HREF tag from HTML in iOS

Trying to extract the value of an <a href> tag from my HTML code. <span class="meta"> <span itemprop="author" class="meta-author"> <a href="http://beta.morningnewsusa.com/author/kmnaing" title="Posts by James ...

htmlios

Sort the currency column in an HTML table through JavaScript

I have a code snippet below that I'm currently utilizing to arrange columns in an HTML table. The code works perfectly for alphabetical sorting and also for single-digit numbers. However, when attempting to sort a column containing currency values, t ...

javascripthtml

iOS Safari browser allows HTML5 video to be displayed over all other elements

I am currently developing an application that utilizes html5 video elements. When using playsinline to ensure the video is treated as an inline element for positioning on iOS Safari, everything seems to work as expected except for one issue - the video a ...

iosangularhtmlhtml5-videomobile-safari

unable to respond when clicking an angularjs link

I'm facing an issue where I can't get a link to respond to click events in AngularJS. When I click on the anchor link, nothing happens. Here is a snippet of the AngularJS script: <script data-require="<a href="/cdn-cgi/l/email-protection" ...

javascriptjqueryhtmlangularjs

Executing a Javascript function within an if statement on an HTML document

This particular code was created utilizing VS 2003 for asp.net Within the HTML document, there is a JavaScript function called checkuser() that has been established to return boolean values. I am looking to encapsulate the following within a call to this ...

javascriptasp.nethtml

What is the best way to organize images of varying dimensions that are provided by the user all within the same card layout

Users have posted images from the database, but the issue arises when the images have different dimensions within the card. https://i.sstatic.net/ktGqL.png If we set fixed height and width, the image loses its original ratio. https://i.sstatic.net/ao91a ...

cssbootstrap-4django-templates

An adaptive Bootstrap grid that collapses and changes based on screen dimensions

Currently, I am in the process of creating a collapsible grid using Bootstrap to display details for each item: If you would like to see a visual representation of the concept, click here. To assist in my project, I have been referring to a helpful threa ...

htmlbootstrap-4

The page layout is completely messed up due to the floating right button

In my jQuery v3.3.1 / Bootstrap v4.1.2 application, I am attempting to add a button at the top right of the page. Please visit for credentials [email protected] 111111 The code I am using is as follows: <section class="card-body content_block_ad ...

htmlbootstrap-4

How can I extract the HTML value of a JSON array element using jQuery?

My jQuery function takes PHP JSON encoded data as an argument. function html_modify(html) { var str = JSON.stringify(html); var arr = $.parseJSON(str); var tot = ''; $.each(arr, function(i, val){ if(i == 'options') { ...

phpjqueryhtmljson

Is there a way to modify AJAX response HTML and seamlessly proceed with replacement using jQuery?

I am working on an AJAX function that retrieves new HTML content and updates the form data in response.html. However, there is a specific attribute that needs to be modified before the replacement can occur. Despite my best efforts, I have been struggling ...

javascriptjqueryhtmlajax