Is it possible to create an overflow scroll effect without setting a specific

I am developing a mobile app using Cordova and I am trying to create a scrolling div that covers the entire page except for a top and bottom navbar. Here is an example on jsfiddle.

From what I have gathered, it seems like I need to specify the height of the div in order for it to scroll. Currently, at line 30 in the CSS file, the height property is commented out:

#long {

background: -webkit-linear-gradient(red, blue);
width: 90%;

/* scroll */
overflow-y: scroll;
/* for the navbar */
margin-top: 48px;
float: left;
/* to make the scroll work */
/*height: 347px;*/
-webkit-overflow-scrolling: touch;

}

I would rather not set a fixed height because using specific intervals for media queries could result in unintended margins on certain phone sizes.

Another factor to consider is that the app has multiple "pages" which are div elements moved out of the viewport when not in use but still in the document.

Do you have any ideas on how to solve this issue? Ideally, I would like a solution that only involves CSS.

htmlcss

Answer №1

To ensure the page fits within the viewport dimensions, one approach is to create a wrapper element with padding for positioning the navbar absolutely. Inside this wrapper, an inner container can be set to scroll, adapting to the viewport height without needing a fixed height.

html,
body {
  height: 100%;
  overflow: hidden;
}

.wrapper {
  height: 100%;
  padding-top: 48px; // Reserve space for the navbar
}

.inner {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.navbar {
  height: 48px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

The structure of the HTML code would resemble:

<div class="wrapper">
  <div class="navbar"></div>
  <div class="inner"></div>
</div>

For a demonstration, refer to this demo.

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

Angular 6 and Bootstrap 4: The Ultimate Checkbox Management System for Selecting or Deselecting All Options

I am facing a problem while trying to implement Bootstrap 4 Checkboxes with a select all and deselect all feature in Angular 6+. The code provided here works fine for the original checkboxes, but the issue arises when using Bootstrap as they have different ...

javascripthtmlbootstrap-4angular6

Neglecting to include an external CSS file within a .aspx content page in an ASP.NET WebForms application

I've been facing some challenges while trying to incorporate an external CSS file into the content pages of my asp.net WebForms application. The content pages have a master page (Site.Master) which includes the following code in the head section: < ...

cssasp.netwebformsmaster-pages

Stop CSS Grid cell from causing vertical expansion of cells in adjacent columns

I believe that visual aids are more effective than text in illustrating the issue: My Objective https://i.sstatic.net/vBAsI.png Current Situation Looking at the example, you can see that the title and description expand equally to accommodate the gallery ...

cssflexboxcss-grid

An Xpath expression that functions perfectly in Firefox isn't working as expected in Selenium

I have a question regarding xpath. In Chrome, there is a td element with the following content: <td class="dataCol col02"> "Hello world(notes:there is$)nbsp;" <a href="xxxx">[View Hierarchy]</a> </td> However, when I inspect the s ...

htmlcssxpathwebdriverselenium-webdriver

How can I align a mapped button to appear on the opposite side of the data using Tailwind CSS?

I've been struggling to find a straightforward solution to this issue for a while now. Let me break it down - I need to display some data on the left side of a post card component with a button located right next to it. Here's an illustration: ...

cssreactjsnext.jstailwind-cssshadcnui

Utilizing JavaScript to access carousel images and captions, then displaying them in a modal with a click option

I'm currently in the process of setting up a carousel feature that will display the image along with its corresponding caption in a modal window once the user clicks on the image. Although I have managed to successfully display the image in the modal ...

javascripthtmlbootstrap-5

How to remove checkbox border using HTML, JavaScript, and CSS

Is it possible to remove the square border from a checkbox in HTML? ...

javascripthtmlcss

What is the best way to manage these interconnected Flexboxes when using align-items: stretch?

Trying to put this into words is quite challenging, so I created a simple diagram for better understanding: https://i.stack.imgur.com/TMXDr.png The outer parent uses flex with align-items:stretch to ensure that both col 1 and col 2 have the same height. ...

htmlcssflexbox

Images on small screens are not displaying properly on responsive cards

I've been struggling with making a card responsive for smaller screens. No matter what I try, some of the images get cut off when the screen size is reduced. I need to keep it small enough to fit on a small screen without sacrificing the appearance on ...

cssbootstrap-4

Scaling down the screen for a smaller display

Having trouble achieving a specific effect and could use some assistance. My goal is to create an action where, upon clicking on the nav element (for simplicity, I've set it to be triggered by clicking anywhere on the body), the following should occur ...

javascriptjqueryhtmlcss

Display a div when hovering over a span with custom styling

Don't let the title fool you. http://jsfiddle.net/whb8A/ I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS. When hovering ...

csshtml

Utilizing the {{value}} parameter within the JavaScript block of the thinger.io HTML gadget

When creating an HTML widget with JavaScript code on the thinger.io Dashboard, you can easily include data from the "thing" by using {{value}} within HTML tags. However, incorporating this data into a JavaScript block poses a challenge. Example of a Pure ...

javascripthtmlwidgetiot

How can I use jQuery to add a row at the beginning of a table based on the number of columns in the first row of HTML?

I'm struggling to add a new row as the first child of the tbody with checkboxes. I attempted the following code but didn't achieve the desired result. var ss = $('tbody tr')[0] var trLen=$(ss).find('td').length; ...

jqueryhtml

What are the different ways to eliminate the scrollbar in angular, css, js, or html?

I'm a beginner in front-end development and despite searching for a solution, I haven't been able to find an answer. Is there a method to eliminate the scrollbar from my page containing an image? Or are there alternative approaches to maintain a ...

javascripthtmlcssangularfrontend

methods to locate the parent element of an element with selenium

<button class="wpO6b ZQScA" type="button"> <div class="QBdPU "> <svg aria-label="New Message" class="_8-yf5 " fill="#262626" height="24" viewBox="0 0 44 44" widt ...

pythonhtmlseleniumselenium-webdrivernested

The body's width is more compact compared to one of my containers in HTML/CSS

After completing my code for a beginner's HTML/CSS project, I realized that the main parent container holding two smaller containers needed to be set at specific widths. The two inner containers had to be exactly 650px and 270px wide, while the main p ...

htmlcss

Event listener is failing to execute the functions

Even though the inline onmouseover="verdadero()" function is properly set up Upon further inspection, it appears that while the event listener is added to the box element, the function is not being triggered when hovering over it, and console.lo ...

javascripthtmlcss

Step-by-step guide on creating a sequential glowing effect for list items with CSS and JQuery

I would like to create a glowing effect on each icon individually. The idea is for each icon to glow for a brief moment and then return to its normal state before moving on to the next icon in line. I am considering using text-shadow for the glow effect an ...

jquerycss

Ways to Show Flexibility through inline CSS Styles?

For this specific element, I am unable to utilize CSS for styling due to constraints within the Google Maps API map. Therefore, I must resort to using inline styling to achieve my desired layout. My goal is to have an image and text displayed side by side, ...

javascripthtmlcssflexbox

Toggling CSS in Vue with a button and a checkbox

I'm currently working with VueJS and here is the CSS code I have: .button-css { align-items: center; background-color: var(--azure-radiance); border-radius: 30px; display: flex; height: 50px; min-width: 200px; padding: 0 60px; } .opensans-bold ...

cssvue.jscheckboxtogglebutton