CSS: Ensuring a column consistently maintains maximum height

Question

CSS: Ensuring a column consistently maintains maximum height

Here is an example of the HTML code I am working with:

<div style="height: 80px">
   ...
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 col1">...</div>
    <div class="col-xs-10 col2">...</div>
  </div>
</div>

Currently, both col1 and col2 have a height of auto. However, col2 is always going to be larger than col1. I want col1 to always match the height of col2, while still allowing col2 to adjust its height dynamically.

Is there a way to achieve this using CSS/SASS?

html css twitter-bootstrap sass

Answer 1

Answer №1

Indeed, achieving equal height columns can be done using either flexbox or table:

.row.equal {
  display: table;
}
.row.equal .column {
  display: table-cell;
  
  /* Just for demo purposes */
  max-width: 5em;
  border: 1px solid #FFF;
  background-color: red;
}

.row.equal.flex {
  display: flex;
}
.row.equal.flex .column {
  /* Just for demo purposes */
  max-width: 5em;
  border: 1px solid #FFF;
  background-color: red;
}

<div class="row equal">
  <div class="column">
    Equal height column using the table property
  </div>
  <div class="column">
    Equal height
  </div>
</div>

<div class="row equal flex">
  <div class="column">
    Equal height column using the flex property
  </div>
  <div class="column">
    Equal height
  </div>
</div>

It's generally safe to proceed without prefixes, but it's always a good idea to consult caniuse for compatibility. Best of luck!

Answer 2

Indeed, achieving equal height columns can be done using either flexbox or table:

.row.equal {
  display: table;
}
.row.equal .column {
  display: table-cell;
  
  /* Just for demo purposes */
  max-width: 5em;
  border: 1px solid #FFF;
  background-color: red;
}

.row.equal.flex {
  display: flex;
}
.row.equal.flex .column {
  /* Just for demo purposes */
  max-width: 5em;
  border: 1px solid #FFF;
  background-color: red;
}

<div class="row equal">
  <div class="column">
    Equal height column using the table property
  </div>
  <div class="column">
    Equal height
  </div>
</div>

<div class="row equal flex">
  <div class="column">
    Equal height column using the flex property
  </div>
  <div class="column">
    Equal height
  </div>
</div>

It's generally safe to proceed without prefixes, but it's always a good idea to consult caniuse for compatibility. Best of luck!

Answer 3

Answer №2

To ensure equal height, use the CSS property display: table-cell. Additionally, apply vertical-align: top to always position text at the top of the column.

For a visual example, check out this JSFiddle link.

CSS code:


.row {
  display: table;
}
.col1, .col2 { 
  display: table-cell;
  width: 300px;
  vertical-align: top;
}
.col1 { 
  background: red;
}
.col2 { 
  background: blue;
  height: 200px;
}

Answer 4

To ensure equal height, use the CSS property display: table-cell. Additionally, apply vertical-align: top to always position text at the top of the column.

For a visual example, check out this JSFiddle link.

CSS code:


.row {
  display: table;
}
.col1, .col2 { 
  display: table-cell;
  width: 300px;
  vertical-align: top;
}
.col1 { 
  background: red;
}
.col2 { 
  background: blue;
  height: 200px;
}

CSS: Ensuring a column consistently maintains maximum height

Answer №1

Answer №2

Similar questions

Changing the design of an animated button from CSS to styled-components

Delete any content that is not enclosed in tags

Is it possible to integrate ngx Pagination with Bootstrap?

Comparing querySelectorAll, NodeIterator, and TreeWalker: which is the quickest JavaScript DOM iterator?

Why is the value of the select element in AngularJS an object?

What is preventing me from using CSS to customize elements within InfoWindows?

What is the best way to retrieve nested objects in JSON using JavaScript and an Ajax request?

"Experience the stunning transformation of 3D objects from poor rendering to exceptional quality in the GLTF-Files Online

Problem with Background-sizing in Mobile Webkit

Utilizing flexbox, absolute positioning, and 100% height in web design

`Fetching HTML content using a web browser``

What could be causing the defaultOpen feature to function on my code simulator but fail to work on my website?

Tips on using b-table attributes thClass, tdClass, or class

Utilizing nested arrays in jQuery templates

Is there a way for a DOMWindow popup to automatically resize to fit its

Need to adjust the layout of PHP form

Tips on retrieving the value of every cell within a row and then transferring it to a corresponding text box within the same row

Attempting to retrieve currentScript is causing a typeError to be thrown

Embrace the strange quirks of each individual

Safari is experiencing issues with overflow-x functionality after a device rotation