Can the height of one div be determined by the height of another div?

Here's the specific situation I am facing: I want the height of Div2 to adjust based on the content of Div3, and the height of Div3 to adapt based on the content in Div2. The height of Div1 is fixed at 500px.

Some of the questions that arise are:

  • Is it a recommended approach, given the need for height calculations based on content?
  • Can this be achieved using CSS alone?
+-------------+
|  DIV1(500px)|
|  +-------+  |
|  |       |  |
|  |  DIV2 |  |
|  |       |  |
|  |       |  |
|  +-------+  |
|  +-------+  |
|  |       |  |
|  |  DIV3 |  |
|  |       |  |
|  |       |  |
|  |       |  |
|  |       |  |
|  +-------+  |
+-------------+
javascripthtmlcsstwitter-bootstrap

Answer №1

When determining the height of Div2 and Div3, you must make a decision on which one should dictate the other's height. It is not possible for them to be reliant on each other's height as it would result in an infinite number of solutions for this equation system:

x = 500 - y
y = 500 - x

One solution is to use flex properties, with D3 adjusting its height based on D2:

#D1 {
  height: 500px;
  display: flex;
  flex-direction: column;
}

#D2 {
  overflow: auto;
}

#D3 {
  flex: 1;
  overflow: auto;
}

If you prefer D2 to determine the height of D3, simply transfer the flex: 1; property to the style of D2.

View the working example on Fiddle

Answer №2

It is not achievable using just CSS. One option is to manually code it with JavaScript, but a more efficient solution would be to explore Grid stylesheets. With ccss, the corresponding rule would be:

#div2[height] + #div3[height] = 500

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

The module 'PublicModule' was declared unexpectedly within the 'AppModule' in the Angular 4 component structure

My goal is to create a simple structure: app --_layout --public-footer ----public-footer.html/ts/css files --public-header ----public-header.html/ts/css files --public-layout ----public-layout.html/ts/css files In public-layout.html, the stru ...

javascriptangulartypescriptangular-components

Is there a way to send arguments to a pre-existing Vue JS application?

A Vue application we've developed connects to a Web Service to retrieve data. However, the URL of the web service varies depending on the installation location of the app. Initially, we considered using .env files for configuration, but realized that ...

javascriptvue.jswebpackvuejs2

The process of assigning a class to a specific range of elements using nth-child

I'm attempting to apply a class to a range of nth-child elements using this code, but it doesn't seem to be working: $('.station li:nth-child(' + strno + '):nth-child(' + endno + ')').attr('class', 'c ...

javascriptjquery

Extract a section of the table

I'm looking to copy an HTML table to the clipboard, but I only want to include the rows and not the header row. Here is the structure of the table: <table style="width:100%" #table> <tr> <th class="border"></th> ...

javascripthtmlangularhtml-table

Utilizing Compass SCSS with Blueprint for Optimal Overflow Settings

I've been working with blueprint through Compass, but I'm facing an issue where longer pages don't have scroll bars. It seems like the default setting for overflow is 'hidden'. Since this appears to be the standard, I assume there ...

csscompass-sasssassblueprint-css

Having trouble locating the issue in my React application

As part of a tutorial project, I am developing an e-Commerce application using React. Currently, I am encountering an error message stating 'TypeError: Cannot read property 'length' of undefined' when dealing with a cart object. Let me ...

javascriptreactjs

Challenges in developing complex single-page applications

Currently, I am in the process of developing an extensive single-page web/javascript application that is going to be quite large. The technologies I am utilizing include ASP.NET MVC4, jquery, knockout.js, and amplify.js. One obstacle I am encountering is ...

javascriptjqueryasp.net-mvc-4angularjssinglepage

Add the item and increase its value within an array using AngularJS

http://plnkr.co/edit/NDTgTaTO1xT7bLS1FALN?p=preview <button ng-click="addRow()">add row</button> <div ng-repeat="row in rows"> <input type="text" placeholder="name"><input type="tel" placeholder="tel"> </div> I am cur ...

javascriptangularjs

Tips for retrieving information from an API and displaying it in a table

I'm struggling to retrieve data (an array of objects) from an API using a Token and display them in a table using Material-UI. However, I keep encountering the following error: Uncaught (in promise) SyntaxError: Unexpected token 'A', "Access ...

javascriptreactjsmaterial-uifetch-api

React App with Material UI V1-beta Integration

I just installed the Create React App example from Material-UI.com. curl https://codeload.github.com/callemall/material-ui/tar.gz/v1-beta | tar -xz --strip=2 material-ui-1-beta/examples/create-react-app Upon installation, I encountered the following erro ...

javascriptnpmmaterial-uicreate-react-app

What is the best way to reference class variables and methods within a callback function in Typescript?

While working on my Angular project with the Highcharts API, I encountered a situation where I needed to pass a state code to a class level method after drilling down to a specific map location. Below is the snippet of my current code: ngOnInit() { this. ...

javascriptangulartypescripthighchartsangular2-highcharts

What is the best way to utilize Typescript when making queries to Firebase?

I have successfully integrated push notifications for my app using Firebase Cloud Functions. Now, I am looking to enhance the user experience by updating the app's badge count alongside the push notifications. I understand that this can only be achiev ...

javascripttypescriptgoogle-cloud-functions

Dynamically hiding elements within tabs using jQuery

Previously, I created a functionality for handling a single set of tabs. However, as the application has expanded, this functionality is no longer sufficient to accommodate multiple sets of tabs. The initial function looked like this: var iconTabs = func ...

javascriptjqueryhtmlcss

When using node.js with express, the req.on('end') event is triggered, but the req.on('data') event does not fire

When using body parser, you have the option of either: application/x-www-form-urlencoded body parser or json body parser Both options yield the same results. This is how the API is being called: $.ajax({ type:'post', url:'/ ...

javascriptnode.jsexpress

Customizing the DatePicker with a unique button in material-ui

For my current project, I am utilizing a Datepicker component. I am looking to incorporate a custom information button in the upper right corner of the calendar layout, similar to the example image provided below: https://i.stack.imgur.com/fHMbn.png Unfo ...

javascripthtmlcssreactjsmaterial-ui

Refresh only a portion of a page using PHP and JavaScript

I have a webpage set up with multiple sections in separate divs. Currently, the essential divs required are <div id="main">...</div> & <div id="sidebar">...</div> Each div contains PHP code like: <?php include("page.php") ...

phpjavascriptjqueryajax

What is the importance of cloning React state before making changes or while working on it?

Someone advised me to always create a clone or copy of the react state before making any changes to it. const newState = [...this.state] newState.name = 'hardik' I'm still unsure about the reason behind this recommendation. Why shouldn&apos ...

javascriptreactjs

Puppeteer: How to wait for an ajax call to complete after a navigation event

When working with my code, I encounter a situation where I need to submit a form, wait for navigation, and then submit a second form. The challenge arises because before submitting the second form, some data needs to be loaded in the form using ajax. I wa ...

javascriptnode.jspuppeteer

I have to convert a JSON string that I received from a server into a particular JavaScript object

Hey everyone! I wanted to share some code I've been working on: $.ajax({ url: '@Url.Action("GetMerchantUsers", "Merchant")', dataType: 'json', success: function (json) { var mappedTasks = $.map(JSON.parse(json ...

javascriptjsonknockout.js

Looking for an Effortless Loading jQuery Image Slider or: Unleashing the Power of cross-slide

I am in need of assistance with implementing lazy loading for images in a jQuery slideshow that pulls from Flickr. Although everything is running smoothly, I would like to optimize the image loading process by only loading them on demand. Currently, I am ...

javascriptjqueryjquery-pluginslazy-loadingslideshow