A `div` element with a height set to 100%, preventing the content from being scrollable

I've been struggling to make my content area (height:100%) scrollable, but have had no success. Despite trying various solutions, nothing seems to work. I'm using devextreme from DevExpress, but it shouldn't affect the CSS.

I've set up an example of the issue on a fiddle: https://jsfiddle.net/phoniex/eop415ju/2/

The aim is to have a fixed green header and grey sidebar, while only the white content area should be scrollable. Unfortunately, the white content refuses to scroll. The only way I've managed to get it to scroll is by changing:

#layout_main_content {
  display: inline-block;
  height:400px;
  width:100%;
  overflow-y: scroll;
}

However, this compromises the height = 100% requirement.

htmlcssdevexpressdevextreme

Answer №1

Give this a shot:

#layout_main_content {
    display: block; //updated
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 38px; //updated
}

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

Tricking Vuejs into triggering a @change event

I possess the following: <input type="radio" :name="activity" v-model="activity" :value="1" v-on:change="callProc(data, data2)" required> Ho ...

htmlvue.js

Updating the PHP form to include functionality for a reset button and adjusting the logic for

Having some difficulties with my PHP form. I created a simple form that consists of the following logic: if (isset($_POST['submit'])) { } elseif (isset($_POST['confirm'])) { } else { } The form includes a submit button, followed by a ...

phphtmlformsreset

Tips for avoiding table column overlap during window resizing situations

My current issue involves using a table to present information. While resizing the window, I noticed that the columns in the table were overlapping. Below is the code snippet: <table style="width:100%;table-layout:fixed"> <tr style="border-bo ...

htmlcss

Is there a way to dismiss a modal window from the parent?

How can I close a modal window from its parent? This task seems quite challenging to accomplish. Essentially, I am opening a non-modal window. In some cases, the user may open a modal window from this non-modal window. If I close the non-modal window, I al ...

javascripthtmlmodal-dialogmodalpopupsnon-modal

Adjusting the header and unordered list on resize

I need help with my portfolio website. I can't seem to figure out how to make my header and navigation menu stack on top of each other when the page is small, and then go back to their normal layout when the page is larger. Below is the HTML code I&a ...

jqueryhtmlcssresize

Problematic: BS4 Cards cannot be accommodated within the parent div.Improved: The

Within a dynamic-height parent div, I have two cards stacked on top of each other. However, the issue arises when these two cards do not completely fit inside the parent div. The problem likely stems from the table within the lower card, which is not respo ...

htmlcssangularbootstrap-4

Zurb Foundation gem causing navigation errors

Typically, I rely on the Twitter Bootstrap Rails gem for my projects, but this time I decided to try out the Zurb Foundation gem. Following the installation instructions meticulously, I added the navigation code: <div class="row"> <div class="th ...

htmlruby-on-rails-3sasszurb-foundation

Disregarding the Syntax of jQuery Mobile

Is there a way to override jQuerymobile's formatting and classes when styling an element? I want to apply my own custom style. I attempted using $.mobile.ignoreContentEnabled = true; in the pageInit function, followed by adding data-role="none" to th ...

jquerycssjquery-mobile

Creating interactive buttons with CSS and jQuery

As a newcomer to coding, I'm trying my hand at creating two buttons that transition from green to blue with a single click, and eventually incorporating them into a live website. The functionality I'm aiming for includes: Both buttons startin ...

javascripthtmljquerycss

Tips for successfully sending a nested function to an HTML button and dropdown menu

I'm working on two main functions - getChart() and fetchData(). The goal is to retrieve chart data and x/y axes information from a database. Within the getChart function, I'd like to incorporate a dropdown menu for displaying different types of c ...

javascripthtmljquerycsschart.js

Trouble aligning Material UI data-table columns (table head) to center in React

I have a data table where I declare rows and columns as simple variables, making it difficult to style them using 'style={{textAlign: center}}'. I tried adding a CSS file, but it did not work with the Material UI table. I am unsure of how to proc ...

cssreactjsmaterial-ui

Swap out the input file with a custom button within the form

In essence, my goal is to conceal the input file and use a button to select a file within the form. When I utilize <label for="input-file">Label</label>, clicking the label allows me to choose a file. However, I would prefer the opt ...

htmlcss

What is the best method for retrieving text from the aria-label attribute?

Currently, I am delving into the world of web scraping. My goal is to extract the work-life balance rating from the Indeed website. However, the main obstacle I'm encountering is the extraction of text from the aria-label attribute so that I can retri ...

htmlcssseleniumweb-scrapinggetattribute

Using PHP and JavaScript to enhance functionality around a hyperlink

I am trying to incorporate a small piece of Javascript on my website to ensure user confirmation. While I have successfully used the 'onclick' function with buttons, I am facing difficulty implementing it on a link. Here is the link in question: ...

phpjavascripthtml

Creating code to ensure a div element is displayed only after a specific duration has elapsed

Can anyone help me with coding to make a div appear on a website after a specific amount of time? Here's an example of what I'm trying to achieve: <div class="container"> <div class="secretpopout"> This is the hidden div that should ...

javascriptjqueryhtml

Every div must have at least one checkbox checked

Coding in HTML <div class="response"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> </div> <div class="response"> <input type="check ...

javascriptjquerycss

Encountering a Tailwindcss error while attempting to compile the CSS file

Struggling to grasp Tailwind CSS as I try to compile the CSS but keep encountering errors. Despite following numerous tutorials, this persistent error continues to hinder my progress. This is the specific error message that keeps popping up: $ npm run bui ...

cssframeworkstailwind-css

What is the best way to stack two pull-right elements on top of each other within the Bootstrap grid system?

I have set up a bootstrap grid system on my webpage and I am trying to align two elements to the right, one below the other. Currently, this is how it appears: https://i.sstatic.net/UcpAJ.png When I try to align the "Active" and "Primary" buttons undernea ...

htmlcss

Ways to halt a script entirely once its tag has been eliminated

I have a script from a page tracker website that runs periodically. Occasionally I need to restart the script from the beginning. To do this, I typically remove the script tag from the DOM and then re-append it. However, because the script utilizes setInt ...

javascripthtmlreactjs

Alter the button ID based on the currently displayed div

My mind is being driven crazy by a particular issue I am experiencing. Let me explain... I have a lengthy scrolling page with approximately 10 divs stacked one after the other without any spacing in between. Positioned at the bottom of the viewport is a bu ...

javascriptjqueryhtml