Adjusting the heights of all elements with identical ids simultaneously

I found the following code:

<div xmlns="http://www.w3.org/1999/xhtml"
    style="z-index: 1; position: absolute; top: 90px; left: 90px; background: none repeat scroll 0% 0% black; width: 800px;"
    id="mainDiv">
<div style="width: 405px;" class="floatLeft" id="mainDiv3">
<div style="width: 100%;" id="mainDiv31">
<div style="width: 107px; height: 100%;" class="floatLeft"
    id="mainDiv313"></div>

<div
    style="width: 2px; height: inherit; background-color: white; cursor: default;"
    class="floatLeft" id="mainDiv31_vertical"></div>

<div style="width: 296px; height: 100%;" class="floatLeft"
    id="mainDiv314"></div>
</div>

<div
    style="height: 2px; width: 100%; background-color: white; cursor: default;"
    id="mainDiv3_horizontal"></div>

<div style="height: 311px; width: 100%;" id="mainDiv32"></div>
</div>

<div
    style="width: 2px; height: inherit; background-color: white; cursor: default;"
    class="floatLeft" id="mainDiv_vertical"></div>

<div style="width: 393px;" class="floatLeft" id="mainDiv4">
<div style="height: 456px; width: 100%;" id="mainDiv41"></div>

<div
    style="height: 2px; width: 100%; background-color: white; cursor: default;"
    id="mainDiv4_horizontal"></div>

<div style="height: 142px; width: 100%;" id="mainDiv42"></div>
</div>
</div>

Now, I am looking to dynamically adjust the height of elements with ids ending in _vertical based on their parent's height. This adjustment should occur automatically when new content is added to the parent div.

For instance:

If content is added to mainDiv313, causing an increase in the height of its parent mainDiv31, then the height of mainDiv31_vertical should also adjust accordingly.

Is there a CSS property that can be assigned to the height of mainDiv31_vertical to achieve this behavior without relying on JavaScript or jQuery for processing overhead?

I have set it to inherit as a starting point to inherit the height from its parent.

Your suggestions are appreciated.

UPDATE

I am aiming for something like 

div1 -->div11
       >div1_vertical
       >div12

This indicates that div1 contains these 3 other divs within it. When the height of div11 changes, the height of div1_vertical should adapt automatically without requiring JS or jQuery. I am seeking a CSS solution given that no specific height is defined for div1 so that it adjusts with its children.

javascriptjqueryhtmlcss

Answer №1

Here's a jQuery solution to achieve the same result:

$("div[id$='_vertical']").height(function(){
  return $(this).parent().height();
});

However, it's advised not to follow this method. IDs should be unique and meaningful, not indicating a specific property. Use a class="vertical" instead.

Answer №2

If you want to adjust the height of all div elements with an id that ends in _vertical, you can use the following code:

$("div[id$='_vertical']").height(function(){
    return $(this).parent().height();
});

Unfortunately, it is not possible to automatically update the height when the parent's height changes due to the lack of events for DOM manipulation and mutation.

I agree with Roland's suggestion to avoid including _vertical in the id and instead use it as a separate class.

Alternatively, you can try using CSS with relative/absolute positioning like this:

CSS

div.vertical {
    position: relative;
}

div.vertical div {
    position: absolute;
    top: 0;
    bottom: 0;
}

HTML

<div id="mainDiv31" class="vertical">
    <div id="mainDiv313"></div>
</div>

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

Modify the `div` content based on the selected items from the bootstrap dropdown menu

My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...

javascriptjqueryhtmlcsstwitter-bootstrap

The gradient applied to the svg <text> element is failing to function

I'm currently working with an SVG element and trying to incorporate a <text> element with a gradient. Interestingly, the same LinearGradient successfully applies to one SVG but not to another. My question is whether a gradient can be applied to ...

htmlcsssvggradientlinear-gradients

Decoding the Mystery: What Do the + and # Symbols Mean in Angular 4 Routes?

Check out the repository at https://github.com/AngularClass/angular-starter https://i.sstatic.net/ITi80.png I noticed the use of + and # for referencing within loadChildren and naming conventions in the folder... After consulting the Angular documentati ...

javascriptangulartypescript

What is the best way to show the associated ul tag?

I've constructed the following HTML: <input id="<code generated id>" type="text" value="select"/> <div id="<code generated id>" class="popup"> <ul id="<code generated id>" class="none"> <li>A</li& ...

javascriptjquery

The data sent through Ajax is not being successfully transferred to the PHP file

I've been racking my brain over this problem for hours - any assistance would be greatly appreciated! I have a lengthy array of checkboxes within a form. Let's simplify things by focusing on the following HTML snippet: <form name="SelectCateg ...

phpjquerymysqlajax

What is the method for customizing the default dropdown color of a bootstrap 4 selectpicker?

In my form, there are single and multiple dropdown selects. To keep things simple, I use the selectpicker class for both types. However, I want to customize the default grey color for Bootstrap 4 Dropdown with the selectpicker class to a clear color. Which ...

htmlcssbootstrap-4bootstrap-selectbootstrap-selectpicker

Having trouble sending data from a page to a child component using getStaticProps

I'm currently working on a project using next.js and I'm facing an issue with passing data from the "gymlist" page to the "table" component. Here is the code snippet from the "gymlist" page where I have defined the getStaticProps function: expor ...

javascriptreactjsnext.js

The #each helper in Handlebars is used to iterate over an array

I have a function that generates an array as output. I am looking for a way to iterate over this array using the each method. Can anyone provide guidance on how to achieve this? Consider if the handlebars helper produces the following array: details: [{ ...

javascripthtmlhandlebars.js

Conflict arises between entities due to the speed of one

I am working on creating a scenario in my world where a ball enters a tube with multiple sections. To achieve this, I have constructed the tube using a series of box shapes that I manipulate by moving and rotating them to form the complete structure of the ...

javascriptthree.jsgame-physicscannon.js

transmit JSON data with an AJAX request and receive a response

I'm looking to make a JSON request to an API and receive a response. I tested it using Postman and successfully received the following response: JSON request to API: { "apikey":"&^$%#@!jwebdpqodp9fgkwjebfkdpqihdqlwkndqp" } The response I receiv ...

javascriptjqueryjsonpostman

The Google calendar is displaying an invalid JSON file

We're in the process of developing a website using AngularJS and we need to integrate Google Calendar events. I've attempted to retrieve the data from a Google Calendar. You can locate the JSON file here: http://www.google.com/calendar/feeds/[em ...

javascriptjsonangularjscalendar

Issue with Global Variable Not Being Updated in Javascript

In my code snippet below, I am struggling to update a global variable within a callback function. function FunctionOne() { var result = ""; for (var i = 0; i < 10; i++) { AjaxFunction(function (data) { result += data; ...

javascriptjquery

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...

javascriptjqueryhtmlcss

Troubleshooting: Issues with React Material-UI breakpoints not functioning

Trying to create a responsive navbar using Material-UI. The goal is to hide the IconButton between 960px and 1920px, and display it from 0px to 960px. However, it seems to work only below 960px. Here's a snippet of the code for IconButton and ul: ...

cssreactjsmaterial-ui

Utilizing Flexbox for a standalone section

I have a specific section in my HTML where I want to utilize flexboxes. The CSS provided is affecting all other rows and columns in my code. How can I ensure that this CSS only impacts the specific HTML section I have included here? Thank you! .row { ...

htmlcsstwitter-bootstrapflexboxcss-selectors

THREE.js: dual scenes sharing identical camera positions

I'm currently working on a project where I have two overlapping scenes. The top scene can be faded in and out using a slider, and users can rotate objects within the scene for a better view. My challenge is to keep the camera position consistent betw ...

javascripthtmlthree.js

Problem with white screen in Cocos2d-html5

I'm experiencing an issue with my cocos2d html5 game on the Tizen platform. While it runs perfectly on PC and all browsers without any errors, on Tizen it only displays a white screen. It seems like the update loop is functioning correctly, but there ...

javascripthtmlcocos2d-iphonetizen

Improprove Your Code Efficiency Using ng-repeat and ng-if

Hello everyone, Here is the structure of my table : https://i.sstatic.net/rTbiC.png The code for the table is as follows: <tr ng-repeat="item in captions | filter:search:strict"> <td>{{item.CodeId}}</td> <td>{{item.EnumC ...

javascriptjsonangularjs

Preserving data in input fields even after a page is refreshed

I've been struggling to keep the user-entered values in the additional input fields intact even after the web page is refreshed. If anyone has any suggestions or solutions, I would greatly appreciate your assistance. Currently, I have managed to retai ...

javascriptjqueryhtmlsession-storage

Differentiate between chrome and chromium with the help of Javascript programming

Can we differentiate between Google Chrome and the open-source Chromium browser using JavaScript? It appears that the navigator.userAgent property is the same in both browsers. ...

javascripthtmlgoogle-chromechromium