Ways to adjust the height of one panel based on the height of surrounding panels

I have a layout with three panels: two on the left side and one on the right.

<div class="row">   
    <div class="col s6">
        <div class="panel">
            content1
        </div>
        <div class="panel">
            content2
        </div>
    </div>
    <div class="col s6">
        <div class="panel">
            content3
        </div>
    </div>
</div>

The content of the left two panels is dynamic, as well as their size. I would like the height of the panel on the right to be dependent on the size of the left panels, creating a flush bottom alignment as shown in this example:

Is it achievable through pure CSS or do I need to implement a JavaScript function?

Edit:

I am using Materialize framework and struggling to understand how flexboxes interact with Materialize components.

javascriptcsspanelmaterialize

Answer №1

If you are utilizing Bootstrap version 4.2.1, the following code snippet can be helpful:

html:

<div class="row">
  <div class="col">
    <div class="row">
      <div class="col">
        <p>This is just an example</p>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <p>This is just an example</p>
        <p>This is just an example</p>
        <p>This is just an example</p>
        <p>This is just an example</p>
      </div>
    </div>
  </div>
  <div class="col">
    <p>This is just an example</p>
  </div>
</div>

Ensure that you integrate Bootstrap properly into your project.

You may find additional information about Bootstrap's grid system here.

Answer №2

To achieve the desired layout without using bootstrap, you can implement a simple flex layout like the following: 

.container{
  display: flex;
}
.row{
  border: 1px solid black;
  min-width: 100px;
  padding: 10px;
  flex-grow: 1;
  margin: 10px;
}

.col{
  display: flex;
  flex-direction: column;
}
<div class="container">
  <div class="col">
    <div class="row">
    1<br />
    1<br />
    1<br />
    1<br />
    </div>
    <div class="row">
    2<br />
    2<br />
    2<br />
    </div>
  </div>
  <div class="col">
    <div class="row">333</div>
  </div>
</div>

Answer №3

Using display flex can potentially resolve the issue at hand!

.row {
    display: flex;
    background-color: #343434;
}
.col {
    flex: 1;
    text-align: center;
    align-items: center;
    justify-content:center;
}

.s6 { background-color: #7dc242; }
.s7 { background-color: #ed1c24; }
<div class="row">
    <div class="col s6">
        <div class="panel">
            content1
        </div>
        <div class="panel">
            content2
        </div>
    </div>
    <div class="col s7">
         <div class="panel">
            content3
        </div>
    </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

What is the best way to upload a file to Firebase Storage using React?

I am facing difficulty uploading a file to Firebase in order to retrieve its getDownloadURL. This is the code snippet I currently have: import React, {useState, useEffect} from 'react' import { Container, Button, Row, Col, Form, Alert } from &ap ...

javascriptreactjsfirebasefirebase-storage

Measure with an "em" unit indicated by a dot

Could you clarify if there is a distinction between writing padding:.6em and padding:0.6em; and if they have the same value, why not just use padding:0.6em; ? Thank you ...

css

Can a value be concealed within a dropdown list on a form (using PHP or JavaScript)?

Within my form, there is a drop down box listing the 50 states in the U.S. This list is generated using a PHP for loop. Users are required to select their residential state and later on, they must also choose a mailing state if it differs from their resi ...

phpjavascriptformsdrop-down-menu

How can I center two divs within a wrapper div without also centering all the text inside?

Is there a method other than using display: inline-block and text-align:center that allows us to center two divs inside a wrapper div? I prefer not to have my text centered. ...

htmlcss

What steps should I take to make my Vue JS delete function operational?

As I work on developing my website, I've encountered some challenges. Being new to coding, I'm struggling with creating a functional delete user button. When I click delete, it redirects me to the delete URL but doesn't remove the entry from ...

javascripthtmlcssvue.js

Combine two elements in an array

I am faced with a challenge in binding values from an Array. My goal is to display two values in a row, then the next two values in the following row, and so on. Unfortunately, I have been unable to achieve this using *ngFor. Any assistance would be greatl ...

javascriptangulartypescript

When the left/top/right/bottom properties are not specified, using position:fixed produces the desired results in Firefox and Internet Explorer, but not in Safari

It's unfortunate that I have to bring up another question related to position:fixed, but after going through various other questions and forum threads, I'm still not clear on this particular issue. The code below is a simple illustration of how ...

csscss-position

Is Nextjs the best choice for developing the frontend code exclusively?

When deciding whether to use Next.js or plain React for my front-end development, should I consider that a back-end already exists? If I am not planning to write a new back-end, which option would be better suited for the project? ...

javascriptnode.jsreactjsnext.jsfrontend

Ways to determine the vertical size of a React component

Currently, I am dynamically generating a list of Symbol(react.element) by utilizing the map function to iterate through an array and incorporate each element's HTML tags. My question is: How can I determine the height of each individual rendered Symbo ...

javascriptnode.jsreactjs

Is there an undocumented property lurking in the depths of the Webpack server

The document specifies that Options that work with webpack-dev-middleware will have a key symbol next to them. I couldn't find any information on "cookieDomainRewrite" but when I tried using it, it worked. Any insights? Or suggestions on how I ...

javascriptnpmwebpackwebpack-dev-serverwebpack-dev-middleware

What is the optimal order for executing JavaScript, jQuery, CSS, and other controls to render an HTML page efficiently?

What are some recommended strategies for optimizing webpage loading speed? What key factors should be taken into consideration? ...

javascriptjqueryhtmlcsshtml-rendering

Transform an array of values into a new array with a set range

Looking for a solution in JavaScript! I currently have an array of values: var values = [3452,1234,200,783,77] I'm trying to map these values to a new array where they fall within the range of 10 to 90. var new_values = [12,48,67,78,90] Does anyo ...

javascript

Use ajax to add rows to the second-to-last table

I am facing a situation where I have a table with 25 default rows. When scrolling to the bottom of the table, I want to dynamically insert another set of 25 rows. Everything is functioning correctly, but in a specific scenario, I need to preserve the last ...

javascriptjqueryajaxdocument-body

Is the Webpack vendors JS bundle in Vue CLI containing unlisted code that is not in the dependencies or package-lock.json file?

An information security auditing tool flagged an outdated library with known vulnerabilities in our webpack-bundled chunk-vendors.js file generated using Vue CLI: The library in question is YUI 2.9.0. It appears that this library is not fully included, a ...

javascriptnpmwebpackpackage.jsonvue-cli

Tips for animating input width as the size value changes during an ajax query transformation

This is my JavaScript code: function updatePriceDisplay() { $.ajax({ url:"query.php?currency=<?=$currencycode;?>" }).done(function(data) { $("value").attr("value", data).attr("size", data.length - 2); }); } updatePriceDi ...

javascripthtmlajax

The 3-way data binding in angularFire does not update a function

My issue involves a firebaseObject (MyFirebaseService.getCurrentUser()) being bound to $scope.user. Once successfully bound, I iterate through the object to check if it contains an "associatedCourseId" equal to a specific value ($stateParams.id). If it doe ...

javascriptangularjsdata-bindingfirebase

Using an onclick function to increment and decrement values

Can anyone help me figure out how to reverse a function onclick? Here is the function: var theTotal = 0; $('button').click(function(){ theTotal = Number(theTotal) + Number($(this).val()); $('.total').text(theTotal); }); ...

javascriptjqueryhtml

When passing data to a controller through fetch in Codeigniter 3, the data may sometimes become null

I am facing an issue where I have data that needs to be sent from a view to a controller using fetch, but the data appears as null in the controller despite being successfully sent with a status of 200. Does anyone have a solution to ensure that the data i ...

javascriptphpfetchcodeigniter-3

Error: jQuery Validation not triggering in Bootstrap modal window

My attempts to use jQuery Validation for form validation inside a modal have hit a dead end. The validation doesn't trigger at all, not even an error message is displayed. Upon debugging, a warning emerged: No elements selected for validation; retu ...

javascriptjqueryformsjquery-validate

"JavaScript issue: receiving 'undefined' when trying to retrieve input

This code snippet is for a web app that tracks the number of losses in a game. The problem arises when trying to retrieve the value, which returns undefined. Every time I reference the username variable, it returns undefined. document.addEventListener(&a ...

javascripthtmlcss