Allow the height of one DIV to dynamically adjust based on the height of another DIV

On my webpage, I currently have the following code:

<div class="container-fluid">
    @Html.Partial("_SearchLeftSide")
    @Html.Partial("_SearchRightSide")
</div>

The first partial contains the following content:

<div class="col-sm-3" style="background-color: lightgray">

And the second partial contains the following content:

<div class="col-sm-9">

If the results side ends up being longer in height due to many results, is there a way to make the search side (left one) adjust its height accordingly?

htmlcssasp.net-mvctwitter-bootstrap

Answer №1

Referenced from this Stack Overflow answer

To achieve this layout, the use of display:table; and display:table-cell; is recommended.

.container-fluid {
  display: table;
  width: 100%;
}
.container-fluid div {
  display: table-cell;
  vertical-align: top;
}
.col-sm-3 {
  background-color: lightgray;
  width: 25%;
}
.col-sm-9 {
  width: 74%;
}
<div class="container-fluid">
  <div class="col-sm-3">
    <!-- _SearchLeftSide -->
    <ul>
      <li>filter 1</li>
      <li>filter 2</li>
      <li>filter 3</li>
    </ul>
  </div>
  <div class="col-sm-9">
    <!-- _SearchRightSide -->
    <ul>
      <li>result 1</li>
      <li>result 2</li>
      <li>result 3</li>
      <li>result 4</li>
      <li>result 5</li>
      <li>result 6</li>
      <li>result 7</li>
      <li>result 8</li>
      <li>result 9</li>
    </ul>
  </div>
</div>

Here is a JSFiddle link for reference

Answer №2

If you're looking for a modern approach to achieving equal height columns, check out this flexbox alternative.

.container {
  display: flex;
  flex-wrap: wrap;  
}

.col:first-child {
  flex: 3;
  background: lightgray; 
}

.col:last-child {
  flex: 1;
  background: gray;
}
<div class="container">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae repellat numquam eligendi fugiat eum voluptas minima eos corporis iste delectus reprehenderit eveniet ut adipisci quia earum deleniti recusandae rerum, aperiam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta unde error, debitis eveniet reprehenderit culpa. Amet accusantium blanditiis eum rem eius fugiat recusandae quae suscipit eveniet ea, aliquam, error. Quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, molestiae. Ipsa accusantium quia iste, totam id molestiae expedita dolores delectus eum eaque reiciendis eius ipsam molestias quis dignissimos quaerat repellendus.</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

AngularJS application is throwing an error indicating provider $q is not recognized

Could someone please advise on what might be the issue with my code snippet below: var app = angular.module('app', [ 'angular-cache', 'angular-loading-bar', 'ngAnimate', 'ngCookies', &a ...

javascripthtmlangularjs

Header problem in Internet Explorer 7

I have been using IE-tester and Adobe Browser Lab to check the IE Compatibility, but a friend suggested using IE Developer Toolbar and switching the IE Browser Mode to IE7. The whole website looks different compared to IE Tester and Adobe Browser Lab. Can ...

csshtml

Updating checkbox Icon in Yii2

Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...

javascriptjquerycssyii2yii2-advanced-app

Ensure the column breaks before the element without disrupting the wrapper in CSS

My objective is to always initiate a line break before a specific element, in this case, the h2 tag: https://i.sstatic.net/fy80H.png https://jsfiddle.net/hv0sm40o/3/ html <div class="columns"> <h2>Jelly pastry chocolate cake pastry</h2&g ...

htmlcsscss-multicolumn-layout

Swap out the HTML button element for text once the form is submitted

On the main page, I have a button that opens a modal when clicked. Inside the modal, there is a form with a submit button that closes the modal and returns to the main page. After closing the modal, I want to change the HTML button on the main page to plai ...

javascripthtmlcssbuttonmodal-dialog

XSL:include is failing to function properly

Here is the configuration I have set up: <?xml version="1.0"?> <xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:include href="top.xsl"/> <xsl:template match=""> Content will be placed here - i ...

htmlcssxmlxsltweb

Customizing Material UI CSS in Angular: A Guide

Recently, while working with the Mat-grid-tile tag, I noticed that it utilizes a css class called .mat-grid-tile-content, which you can see below. The issue I am encountering is that the content within the mat-grid-tile tag appears centered, rather than f ...

cssangulartypescriptmaterial-ui

What is the best way to insert <a> tags into my HTML code without disrupting its background-color, text color, or styling?

I was trying to enclose my div with a tags in the "button" div class, but when I added the a tags with href, it replaced the background-color and text color with Facebook's colors. Can someone please assist me? Below are the HTML codes: footer ...

htmlcss

Every time I refresh the page, new data is inserted into the MySQL database

After clicking the button, I expect data to be inserted into my MySQL database. However, it only inserts the data when I manually reload the page. Below is the code snippet: <script> function minuscredits() { alert("hah"); <?php mysql ...

phphtmlmysqlfunction

Ways to transfer data from the view to the controller

Having a function in the controller like public ActionResult Index(int id,int test= 0,int to=10){}, I am trying to update the value of 'test' from the view by clicking on it and adding 10, but I'm currently stuck. I have attempted using acti ...

ajaxasp.net-mvc

HTML: Ensure that a user fills out a minimum of one text box before submission

<tr><td> First Name: </td><td><input type="text" name="FirstName" required></td> </tr> <tr><td> Last Name: </td><td><input type="text" name="LastName" required> </td></tr> ...

javascripthtml

Units of VH and VW with Bizarre IOS Mobile Browser Display

For my new project, I decided to use relative units which seemed like a good idea at the time. While working on it, I diligently checked on Chrome emulation to ensure everything looked good on various devices. After pushing it to Heroku, everything appear ...

htmlioscssipadviewport-units

The HTML img tag is failing to load the shared image from the Google Drive folder

Attempting to insert an image into an HTML document using Google Drive has proven challenging. I set up a Public Folder with sharing options set to Anyone with Link, and placed images in the folder using the same sharing settings. Unfortunately, the images ...

htmlimageurlgoogle-drive-apifile-sharing

The EventListener is not functioning properly when trying to link an anchor element with a

I am dealing with a tag that has href="tel:XXXXXXXXX" and I am looking to capture the click event associated with it. After testing the code below on Chrome, I observed that clicking on the tag calls the application but does not trigger a click event: $(d ...

javascripthtml

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

I'm having an issue with my style.css file. As a beginner in programming, I am trying to position text next to an image attached in the sidebar. However, the text is overflowing past the border. Here's the HTML code: Please see this first to ide ...

javascripthtmlcssbootstrap-4

Having difficulty retrieving the value from a database column as it consistently displays both the column name and value

I am currently working on setting up a dynamic site title that will be controlled by my database. This way, I can easily update the database with a new title and have it reflect on my website. Below is an example of the controller setup: TestController: ...

phpmysqlhtmlvariableslaravel-5

What is the best way to make two divs appear side by side without causing the content below to shift as well?

I am trying to figure out how to position the Creams element underneath the "Name" section in my HTML setup. I have the following code: <h4 class="wrap-title">Name</h4> <button class="btn btn-primary btn-xs title-button" ...

htmlcsscss-float

Sending parameters to ajax using a click event

I'm facing an issue with passing variables through Ajax to PHP. In a PHP file, I'm generating some divs with id and name attributes. livesrc.php echo "<div class=\"search-results\" id=\"" . $softwareArray['Sw_idn'] ...

javascriptphphtmlajax

Dynamically Allocating Page Heights

I am tasked with creating an ASP.NET MVC page that will display a template of controls. The controls will be retrieved from an XML file. One issue I am facing is that the number of controls is not fixed, so the page height needs to be dynamic. Our site has ...

cssasp.net-mvc

What is the best way to delete a parent div without losing its inherited CSS properties?

My current objective involves the following: <div id="table"> <div id="user"></div> <div id="user1"></div> </div> Upon clicking a button, the following actions take place: $("#body").append("<div id=\"user-wra ...

javascriptjquerycss