Tips for adjusting the height of an element to accommodate the height of another element

I am facing an issue with a dynamically added div using JS. The div includes an overlay and a contained element that should scroll along with the page if needed. I want to prevent any scrolling within the div itself, which resizes based on its content. The overlay is set to cover the entire page with width=100% and height=100%. However, when the contained div becomes taller than the viewport, the overlay stops short after the viewport's height.

If my explanation is unclear, you can check out this simplified fiddle to better understand: http://jsfiddle.net/72SU5/

Below is the CSS code I'm currently using:

#overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    z-index: 20;
}

#overlay > div {
    width: 100px;
    border: 1px solid #ccc;
    padding: 20px;
    padding-bottom: 40px;
    background: #eee;
    margin: 50px auto;
}

My question is, how can I make the overlay extend to 100% of the new height once the hidden content is revealed? I am open to using JS/jQuery for this task or even refactoring with a pure-CSS approach if it provides a solution where the overlaying content scrolls along with the page when necessary.

javascriptjqueryhtmlcss

Answer №1

Include this style in your existing #overlay CSS definition:

overflow:auto;

See Example on Fiddle

Answer №3

#background {
width: 100%;
height: auto;
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0;
z-index: 20;
}

#background > section {
width: 150px;
border: 2px solid #333;
padding: 30px;
padding-bottom: 60px;
background: #ccc;
margin: 70px auto;
}

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

Getting Started with CSS Alignment - A Novice's Guide

Recently, I embarked on my journey to learn HTML and CSS with the ambition of creating a login page. Although I've successfully crafted a basic version, I'm encountering an issue where the input boxes and labels are misaligned, giving off an unpr ...

htmlcss

Items added to localStorage will not be able to store objects that have keys with array values

There seems to be an issue with how localStorage.setItem stores object values when the object contains keys with array values. var obj = data : { cachedat : ['1' , 2 , 3] }; localStorage.setItem('data' , JSON.stringify(obj) ); However, ...

javascriptangulartypescript

Import divX from page2 into page 1 by utilizing jsonp to circumvent the restrictions of the same origin policy

I've been attempting to load a div from another page with the following code, $('#result').load('page2.php #divX') However, the JavaScript on that page doesn't seem to work, even though both page1 and page2 are linked to the ...

javascriptjsonjqueryjquery-callback

What could be the reason that the MVC controller action method marked as HttpPost is not being triggered by an external JavaScript file?

Below is the View cshtml code that is relevant: <tbody> @foreach (var job in Model.JobsList) { <tr> <th onclick="OnJobSelected('@job.JobID')">@job.JobTitle</th> <th>@job.Statu ...

javascriptasp.net-mvcasp.net-mvc-4asp.net-ajax

Creating a toggler in Bootstrap version 5.1: A comprehensive guide

I am currently trying to set up a Navbar toggler using the guidance provided in the Bootstrap v5.1 documentation. My intention is to have the brand name displayed on the left and the toggler on the right. However, even though the code appears to be set up ...

htmlbootstrap-5

Eliminating the separation between sections in a Flot pie chart

Is there a way to eliminate the visible line between slices and the background in a pie chart created with Flot? Check out my jsfiddle example In its current state, it looks like this: But I want it to resemble something like this (please excuse my lack ...

jqueryjquery-pluginschartsflotpie-chart

The JSON response is returning as undefined

I have been experiencing some difficulties since yesterday. Here are the current details I am dealing with. PHP $json = array( 'total_cost' => '109.38', 'insurance' => 1 ); echo json_encode( $json ); Console { ...

phpjqueryjson

Tips on reversing a numeric value with scientific notation in nodeJS

Exploring the optimal method to reverse an integer (positive and negative) in NodeJS 12 without the need to convert the number to a string. This solution should also accommodate numbers written in scientific notation such as 1e+10, which represents 10000 ...

javascriptnode.js

Leveraging spread syntax and styling for array string interpolation in JavaScript

Imagine I have an array such as [1,2,3] and my goal is to insert its values into a string format like: the values are (?, ?, ?) Can anyone suggest a simple solution for this? I am aware of the spread operator ...[1,2,3], and it's feasible to conver ...

javascript

Guide to setting up npm pug-php-filter in conjunction with gulp

I'm having trouble setting up pug-php-filter (https://www.npmjs.com/package/pug-php-filter) with gulp in order to enable PHP usage in my Pug files. Any assistance would be greatly appreciated. ...

phphtmlnpmgulppug

Is there a race condition issue with jQuery Ajax?

Here is the JavaScript code I'm using to iterate through a list of textfields on a webpage. It sends the text within each textfield as a price to the server via an AJAX GET request, and then receives the parsed double value back from the server. If an ...

javascriptajaxjquery

In Safari, non-ascii characters are incorrectly stored in document.cookies as trash

Below is a snippet of JavaScript code that I am working with: wdata['account'] = {"value": $(input).val(), "title": "Номер карты получения"}; var r = { "ipayway": ipw_selected, "wpayway": wpw_selected, "amount_type" ...

javascriptjsoncookiessafaricross-browser

HTML popup window for a Socket.IO chat experience

When creating a Socket.IO chat with a generated popup window for private messages, I encountered an issue with IE9 not starting the window.opener.socket.on(...) function successfully. In contrast, Firefox and Chrome ran this function without any problems ...

jquerynode.jspopupsocket.io

Error message "Invalid CSRF token" in Node.js using Express and CSURF package

I've been working on integrating csurf into an express app hosted in firebase, and I've encountered the 'EBADCSRFTOKEN' error in a specific scenario. This issue only arises when a user is logged in through a session cookie. When sendin ...

jquerynode.jsfirebaseexpresscsrf

Dynamic line breaks within an unordered list

I have a requirement where I need to display the last two li elements from an ul list on a new line if the screen width is less than 625px. The code snippet below achieves this functionality: ... ... ... ... However, this code fails valida ...

htmlcsshtml-lists

Changing the state using React's useState hook

Why is it considered a bad idea to directly mutate state when using React's new useState hook? I couldn't find any information on this topic. Let's look at the following code: const [values, setValues] = useState({}) // doSomething can be ...

javascriptreactjsreact-hooks

"Troubleshooting: Why isn't my Tailwindcss box shadow

I'm currently incorporating Tailwindcss into a React project to recreate the Star Wars website mobile menu. However, I am facing an issue where the box shadow added to the hamburger icon segments is not visible when the navigation drawer is opened. A ...

cssreactjsjsxtailwind-css

Issue: EACCES error encountered while attempting to execute bower install operation

After running bower install css-circle-menu, I encountered the following error: /usr/local/lib/node_modules/bower/lib/node_modules/configstore/index.js:54 throw err; ^ Error: EACCES: permission denied, open '/Users/ja ...

javascriptnode.jsnpmbower

Tips for importing extensions with Rselenium

I could use some assistance in understanding how to activate a chrome extension using RSelenium. The extensions are visible in the browser tabs but are not automatically loaded when working with RSelenium. https://i.sstatic.net/QKqVg.png ...

htmlrgoogle-chromeselenium-webdriverrselenium

Reflector has no definition in three.js - a software mystery

After implementing the code snippet from the webgl_mirror example, I attempted to add a reflector surface to my scene. It seems that the following code snippet is all that's needed to introduce a reflective object to the scene: var geometry = new TH ...

javascriptthree.js