How to use CSS to ensure that divs inside table columns all have equal height

Question

How to use CSS to ensure that divs inside table columns all have equal height

I have encountered an issue where if you have two table columns, one with taller content than the other, then divs inside the shorter column do not expand to match the height of the first column, even with a height set to 100%. Is there a way to achieve this layout behavior using CSS?

<table>
    <tr>
        <td class="one">
            <ul>
                <li>fasdf</li>
                <li>asgasdf</li>
                <li>afdsaggrea</li>
                <li>asgasdf</li>
                <li>afdsaggrea</li>
            </ul>
        </td>
        <td class="two">
            <div class="three">
                First div
                <div>
                    Second div
                </div>
            </div>
        </td>
    </tr>
</table>

In the jsfiddle example I have provided, the desired behavior is for the green box to fill the entire yellow box.

css html-table multiple-columns

Answer 1

Answer №1

If your div is not expanding to 100% height, it could be due to the lack of height set on the parent element.

For example, if you have a list inside the parent div, it may be preventing the div from growing to the desired height.

To fix this issue, you can set a specific height on the parent element and then assign a height of 100% to the child element. Here is an example in this JSFiddle:

.two{
    background-color:yellow;
    height:100px;
}
.three{
    background-color:green;
    height:100%;
}

Answer 2

If your div is not expanding to 100% height, it could be due to the lack of height set on the parent element.

For example, if you have a list inside the parent div, it may be preventing the div from growing to the desired height.

To fix this issue, you can set a specific height on the parent element and then assign a height of 100% to the child element. Here is an example in this JSFiddle:

.two{
    background-color:yellow;
    height:100px;
}
.three{
    background-color:green;
    height:100%;
}

Answer 3

Answer №2

If you want to enable scrolling in a container, you can also use the "overflow: auto" property.

.three {
height: 100%;
overflow: auto;
}

While this solution may work well in browsers like Chrome, it may pose issues in others where the parent element's height is not specified during rendering. One workaround is to set a height for the parent element with the class "two" and then applying height and overflow properties to the element with class "three."

Alternatively, you can consider using JavaScript to achieve the desired functionality. :)

Answer 4

If you want to enable scrolling in a container, you can also use the "overflow: auto" property.

.three {
height: 100%;
overflow: auto;
}

While this solution may work well in browsers like Chrome, it may pose issues in others where the parent element's height is not specified during rendering. One workaround is to set a height for the parent element with the class "two" and then applying height and overflow properties to the element with class "three."

Alternatively, you can consider using JavaScript to achieve the desired functionality. :)

Answer 5

Answer №3

For a flexible approach without setting a fixed height and compatibility across all browsers, I have implemented a well-developed JavaScript solution on your modified JSFiddle.

var tableCritter = new function TableCritter(){
  var critter=this;
  var $window = $(window);
  var $two = critter.$two = $('.two');
  var $three = critter.$three = $('.three');

  function adjustHeight(){
    $three.css({ height:$two.height() });
  }; 
  adjustHeight();
  $window.on('resize',adjustHeight);

  critter.stop = function(){
    $window.off('resize',adjustHeight);
  };
};

Answer 6

For a flexible approach without setting a fixed height and compatibility across all browsers, I have implemented a well-developed JavaScript solution on your modified JSFiddle.

var tableCritter = new function TableCritter(){
  var critter=this;
  var $window = $(window);
  var $two = critter.$two = $('.two');
  var $three = critter.$three = $('.three');

  function adjustHeight(){
    $three.css({ height:$two.height() });
  }; 
  adjustHeight();
  $window.on('resize',adjustHeight);

  critter.stop = function(){
    $window.off('resize',adjustHeight);
  };
};

How to use CSS to ensure that divs inside table columns all have equal height

Answer №1

Answer №2

Answer №3

Similar questions

Cursor disabling effect in IE 11 causing interference with drop-down options on Twitter Bootstrap 3

CSS or Coding? Learn how to display items side by side instead of on top of each other

The progress bar is visually enhanced with a border style that doubles as a background color

The lack of responsiveness in Bulma CSS is causing issues with the Bulma Carousel and image displays

How can you match the width of a series of elements to the width of an image directly preceding the div?

Combining the p class with flexbox for optimal layout design

Incorporating Materialize CSS and MaterialUI within a single React Application

Style your content using PHP and CSS to format text with multiple selectors

Could you please provide instructions on how to manipulate the :root CSS variable using JQuery?

Switching the arrow direction in Bootstrap 4 menu toggles

Double Row Navbar Struggles in Bootstrap 4

The hamburger menu functions properly on the homepage but is not working on the individual about page

Tips for reducing a table to fit the dimensions of a mobile device

Deactivate the Autofill feature on Google Toolbar

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

The issue arises when trying to use ::v-deep in conjunction with v-dialog's content-class when using scoped scss

Creating a hover state for a CSS class seems straightforward, but I'm finding it a bit tricky

Leveraging SignalR in conjunction with jQuery to dynamically alter the CSS style of a span

Is there a way to incorporate the ::after or ::before pseudo-elements into an image tag?

Tips for focusing on a background image without being distracted by its child elements