Return to Answer

This is a css issue: offsetHeight and height have different definitions in css, which are important to understand. If you use read one and use that value to set the other, things go awry. Doesn't matter if you use react to do this or any other framework.

• offsetHeight = content + padding + border (but excludes margin)
• height = content + padding + border + margin

Because the height that is read excludes margins, it is too small. Therefore css compensates by sacrificing margin to display the content.

In an example:

• let's assume your high header has padding of 0, margins of 10px top and bottom, and content with 2 lines and content-height of 48px.
• So total height is 10+48+10 = 68px.
• the offsetHeight you read is then 48px. (excludes margins)
• you then set height to 48px. The resulting total height, including margin, is now set to 48px.
• This is the wrong value. Correct value should have been 68px.

To fix, you need to include the top and bottom margin to the offsetHeight before passing height to the updateHeight() method:

componentDidMount() { // get topMargin and bottomMargin from DOM let heightPlusMargins = this.refs.header.offsetHeight + topMargin + bottomMargin; this.props.updateHeight(heightPlusMargins, 'header') } 

You can use jQuery or vanilla javascript to get the top and bottom margin. Both are explained in a separate thread on SO here.

On a more general note: you overall approach to get rows of equal height seems very inefficient. You first render the columns, then read height from all cells, and then adjust height and re-render. There is probably a better overall solution to solve the height issue in css only.
Looks like your columns are of equal width, and therefore all cells are of equal width.
You could also render by row (instead of by column), using only css to give each cell the same width (% or fixed) and to make sure each cell in the same row is of equal height. HTML tables or CSS flexbox (I prefer the latter) are options to achieve this.
Then you can simply render in one pass, and lose all the ref reading, state updating and re-rendering code. Making overall code cleaner and much more efficient.

This is a css issue: offsetHeight and height have different definitions in css, which are important to understand. If you use read one and use that value to set the other, things go awry. Doesn't matter if you use react to do this or any other framework.

• offsetHeight = content + padding + border (but excludes margin)
• height = content + padding + border + margin

Because the height that is read excludes margins, it is too small. Therefore css compensates by sacrificing margin to display the content.

In an example:

• let's assume your high header has padding of 0, margins of 10px top and bottom, and content with 2 lines and content-height of 48px.
• So total height is 10+48+10 = 68px.
• the offsetHeight you read is then 48px. (excludes margins)
• you then set height to 48px. The resulting total height, including margin, is now set to 48px.
• This is the wrong value. Correct value should have been 68px.

To fix, you need to include the top and bottom margin to the offsetHeight before passing height to the updateHeight() method:

componentDidMount() { // get topMargin and bottomMargin from DOM let heightPlusMargins = this.refs.header.offsetHeight + topMargin + bottomMargin; this.props.updateHeight(heightPlusMargins, 'header') } 

You can use jQuery or vanilla javascript to get the top and bottom margin. Both are explained in a separate thread on SO here.

On a more general note: you overall approach to get rows of equal height seems very inefficient. You first render the columns, then read height from all cells, and then adjust height and re-render. There is probably a better overall solution to solve the height issue in css only.
Looks like your columns are of equal width, and therefore all cells are of equal width.
You could also render by row (instead of by column), using only css to give each cell the same width (% or fixed) and to make sure each cell in the same row is of equal height. HTML tables or CSS flexbox (I prefer the latter) are options to achieve this.
Then you can simply render in one pass, and lose all the ref reading, state updating and re-rendering code. Making overall code cleaner and much more efficient.

This is a css issue:

• You read offsetHeight = content + padding + border (but excludes margin)
• Then you set the height = content + padding + border + margin

Because the height that is read excludes margins, it is too small. Therefore css compensates by sacrificing margin to display the content.

To fix, you need to include add the top and bottom margin to the offsetHeight before passing height to the updateHeight() method. You can use jQuery or vanilla javascript to do this. Both are explained in a separate thread on SO here.

On a more general note: you overall approach to get rows of equal height seems very inefficient. You first render the columns, then read height from all cells, and then adjust height and re-render. There is probably a better overall solution to solve the height issue in css only.
Looks like your columns are of equal width, and therefore all cells are of equal width.
You could also render by row (instead of by column), using only css to give each cell the same width (% or fixed) and to make sure each cell in the same row is of equal height. HTML tables or CSS flexbox (I prefer the latter) are options to achieve this.
Then you can simply render in one pass, and lose all the ref reading, state updating and re-rendering code. Making overall code cleaner and much more efficient.

This is a css issue: offsetHeight and height have different definitions in css, which are important to understand. If you use read one and use that value to set the other, things go awry. Doesn't matter if you use react to do this or any other framework.

• offsetHeight = content + padding + border (but excludes margin)
• height = content + padding + border + margin

Because the height that is read excludes margins, it is too small. Therefore css compensates by sacrificing margin to display the content.

In an example:

• let's assume your high header has padding of 0, margins of 10px top and bottom, and content with 2 lines and content-height of 48px.
• So total height is 10+48+10 = 68px.
• the offsetHeight you read is then 48px. (excludes margins)
• you then set height to 48px. The resulting total height, including margin, is now set to 48px.
• This is the wrong value. Correct value should have been 68px.

To fix, you need to include the top and bottom margin to the offsetHeight before passing height to the updateHeight() method:

componentDidMount() { // get topMargin and bottomMargin from DOM let heightPlusMargins = this.refs.header.offsetHeight + topMargin + bottomMargin; this.props.updateHeight(heightPlusMargins, 'header') } 

You can use jQuery or vanilla javascript to get the top and bottom margin. Both are explained in a separate thread on SO here.

On a more general note: you overall approach to get rows of equal height seems very inefficient. You first render the columns, then read height from all cells, and then adjust height and re-render. There is probably a better overall solution to solve the height issue in css only.
Looks like your columns are of equal width, and therefore all cells are of equal width.
You could also render by row (instead of by column), using only css to give each cell the same width (% or fixed) and to make sure each cell in the same row is of equal height. HTML tables or CSS flexbox (I prefer the latter) are options to achieve this.
Then you can simply render in one pass, and lose all the ref reading, state updating and re-rendering code. Making overall code cleaner and much more efficient.

This is a css issue:

• You read offsetHeight = content + padding + border (but excludes margin)
• Then you set the height = content + padding + border + margin

To fix, you need to include the add the margin to the offsetHeight before invoking the updateHeight() method. You can use jQuery or vanilla javascript to do this. Both are explained in a separate thread on SO here.

On a more general note: you overall approach to first render the columns, then read height from all cells, and then adjust height and re-render seems very inefficient. There is probably a better overall solution to solve the height issue in css only. Looks like your columns are of equal width, and therefore alls cell are of equal width. You could also render by row (instead of by column), using css only to make sure each cell in the same row is of equal height.

This is a css issue:

• You read offsetHeight = content + padding + border (but excludes margin)
• Then you set the height = content + padding + border + margin

Because the height that is read excludes margins, it is too small. Therefore css compensates by sacrificing margin to display the content.

To fix, you need to include add the top and bottom margin to the offsetHeight before passing height to the updateHeight() method. You can use jQuery or vanilla javascript to do this. Both are explained in a separate thread on SO here.

On a more general note: you overall approach to get rows of equal height seems very inefficient. You first render the columns, then read height from all cells, and then adjust height and re-render. There is probably a better overall solution to solve the height issue in css only. 
Looks like your columns are of equal width, and therefore all cells are of equal width. 
You could also render by row (instead of by column), using only css to give each cell the same width (% or fixed) and to make sure each cell in the same row is of equal height. HTML tables or CSS flexbox (I prefer the latter) are options to achieve this.
Then you can simply render in one pass, and lose all the ref reading, state updating and re-rendering code. Making overall code cleaner and much more efficient.