Tips for incorporating scrollbars into a full screen web application's content area that spans the entire height of the screen with CSS

I am currently working on a full screen web app. I have applied CSS 100% height to the HTML, body, and parent elements. Within the app, there is a contents table that dynamically grows as items are added to it. My goal is to have a vertical scrollbar automatically appear when there is not enough space to display all content.

I have experimented with various combinations of overflow-y:auto; and overflow:auto; on the tbody, table, and the enclosing div (which also has 100% height). However, none of these solutions seem to be effective in achieving the desired result. I am wondering if it is even possible to make this work with elements set to 100% height. Do CSS overflows necessitate a fixed height?

Edit

Below is some code snippet related to my issue. The table within the left column is where I would like to implement a vertical scrollbar when the content exceeds the available space.

https://jsfiddle.net/468cpvmv/

cssfullscreenscrollbars

Answer №1

Regrettably, the use of a table within a faux-table complicates achieving this correctly.

By setting the fieldset > div to its inherited height based on the table inside, you encounter difficulties.

Instead, consider referencing the viewport height to obtain the desired outcome, utilizing calc. Currently, there are 45px of additional elements (padding, headers, etc.) that need to be excluded from the calculation, so include the following declaration:

.page-contents .left-col fieldset > div {
    max-height: calc( 100vh - 45px );
    overflow-x: auto;
}

Here is a fiddle for reference: https://jsfiddle.net/468cpvmv/9/

The heights illustrated in the image below should be deducted during the calculation:

https://i.sstatic.net/zdNcV.png

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

What is the best way to make hyperlinks in impress.js?

Wanting to craft a visually stunning brochure for my client with the help of impress.js. I want to include a link on each slide that directs to the relevant page when clicked. Is it feasible to have a clickable link to each slide on every page as well? ...

cssimpress.js

identify the row preceding the expiration month of a domain using JavaScript or jQuery

Is there a way to highlight the row representing the domain whose expiry month is before the current month, using the date and time information provided in the table (<td>2017-04-14 17:21:00</td>) with JavaScript or jQuery? <table> & ...

javascriptjqueryhtmlcss

What causes background images to be affected by collapsing margins?

I am working with simple HTML and CSS code. One issue I have noticed is the bottom margin collapse between the .outside box and the .inside box. I am puzzled as to why the background image does not show when this bottom margin collapses, as the backgroun ...

cssbackgroundmargin

Align two grid columns in the centre of the footer

I have a question regarding the alignment of two grid columns in my footer. I am using Bootstrap 4 and would like to center them directly in the middle. Currently, both columns are centered individually but there is a large space between them. I have tried ...

htmlcsstwitter-bootstrapbootstrap-4

Discovering elements with Selenium through XPATH or CSS Selector

Having trouble locating the "import" element using Selenium Webdriver in C#. I've attempted the following codes but haven't had any luck: driver.FindElement(By.XPath("//*[@class='menu_bg']/ul/li[3]")).Click(); driver.FindElement(By.XPa ...

c#cssxpathselenium-webdriver

Applying CSS leads to no visible changes on the screen

I encountered a strange issue with my CSS - the button background color should be blue with white text, but it is not displaying correctly. I tried moving the code within a div container, but it still doesn't work properly. If anyone knows how to solv ...

htmlcss

Guide on concealing and showcasing an icon within a bootstrap collapsible panel using solely CSS

Hey there, I've been working with Bootstrap's collapsible panel feature and I'm trying to get Font Awesome icons (+ / -) to display based on whether the panel is expanded or collapsed. I'm not too familiar with using CSS for this kind ...

htmlcss

Eliminate CSS property with Jquery

I have found that most solutions only remove the attribute setting rather than removing the attribute entirely. My goal is to switch the positioning of an element from absolute to fixed. In order to position the element correctly within its parent DIV, I ...

jquerycss

Can you provide instructions on how to vertically adjust a bootstrap div?

Here is the code snippet: <div class="container"> <div class="row"> <div class="container1 col-lg-4 col-md-4 col-sm"> <h1 class="status">Status:</h1> </div> & ...

cssbootstrap-4

Enhancing Image Quality in Internet Explorer 10

Here is my current situation: I am working on a web page with a responsive design. The layout of the page consists of two vertical halves, and I intend to display an image (specifically a PDF page converted to PNG or JPG) on the right side. The challenge ...

htmlcssimageinternet-explorer-10interpolation

What's the best way to ensure that my image remains perfectly centered at the point where the background colors of my

html <body> <header> <div class="indexHeaderWall" id="headerLeftWall"> </div> <img id="profilePic" src="icons/myPicture.jpg" alt="Picture of Daniel Campo ...

htmlcssflexboxpositionweb-deployment

Creating manageable CSS styles for a wide variety of themes

I need to add themes to a web application that allows users to switch between them seamlessly. The designers want a variety of font colors and background colors, around 20 in total. Is there a way to achieve this without creating multiple .css files, which ...

javascripthtmlcssthemes

flexbox align items jumble

I am trying to achieve a similar effect as seen in my sketch. The man should always be placed in the right bottom corner of the header. The carousel should be positioned in the center or center-left (50% of the header height). I have added a new class (p ...

htmlcssflexbox

Incorporating a Link to a RowLabel on a Google Chart Timeline

I have been working diligently on constructing a timeline for our team's Project Roadmap. Everything is set up quite nicely: I've successfully embedded the Timeline into our Google Site and it seems to be functioning well with all the components ...

javascripthtmlcsschartsgoogle-visualization

When incorporating the Bootstrap 5.3.3 grid with the class 'row w-100', there appears to be a noticeable amount of unused space on the right side

While trying to implement Bootstrap grid, I ran into an issue. When executing the code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, i ...

htmlcssbootstrap-5bootstrap-grid

Align the content in the middle of an inline-block division

I have been struggling to center the content of my divs both horizontally and vertically. I have come across some threads discussing this issue, but I have not been able to successfully implement it in my code. In my setup, there are three divs (.block) t ...

htmlcss

How to set a custom background image for the Django admin panel

I am struggling to display a background image in the Django admin site. Despite researching multiple solutions, none of them seem to work for me. All I want is for the background to be visible behind the admin site. I have a file named base_site.html. {% ...

cssdjangoadmin

Vertical alignment of divs in a single column will not be consistent

I need assistance with my website's "team" section. I am trying to ensure that the member_body divs within the same column as the member img and member header can be adjusted in width. However, they are not aligning vertically or maintaining the same ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to enlarge a Material UI card?

Currently, I am utilizing Material UI version 4 on my website and integrating cards (for more details, click here). https://i.stack.imgur.com/dm2M2.png I am interested in enlarging the overall size of the card so that the image appears larger. As I am si ...

cssreactjsmaterial-ui

Smooth Transitions When Adding and Removing Components

Essentially, I am looking to achieve something similar to this: visible ? <Fade> <SomeComponent/> </Fade> : undefined My goal is to smoothly transition individual elements without having to control the state of the Fade component fr ...

javascriptcssreactjscss-transitionstransition