I'm using "foundation for sites" to achieve responsiveness.
There, I have:
<div class="row"> <!-- defines a grid of 12 columns -->
<div class="columns large-1 medium-1"> </div> <!-- some space to the left -->
<div class="columns large-6 medium-6" style="border: red solid 1px;">
a lot of content, including a header, and multiple lines of text
</div>
<div class="columns large-4 medium-4" style="border: red solid 1px; height: 100%;">
a little bit of content
</div>
<-- the right spacer column is not needed -->
</div>
The red borders are only there for testing. To my understanding, the "height: 100%" of the smaller div should make it as high as the bigger one. But the border is only around the text content. When I inspect the div's using the browser development tools, the "row" div and the big "columns" div have a computed height of >100 px, while the small "column" div has only 17 px.
The reason why I need the 100% height is that the content of the small div will be aligned to the bottom eventually. But before I can do that, the height must work.
The css for classes "row" and "columns" is completely defined in foundation, I did not change or override anything except the element styles in the above example.
What am I missing ?
Edit:
I'm trying to paint it in character graphics, showing only the borders of the "columns" div's.
It actually looks like:
|--------------------|--------------------| | lots of text | a little text | | lots of text |--------------------| | lots of text | | lots of text | |--------------------|
But it should look like:
|--------------------|--------------------| | lots of text | a little text | | lots of text | | | lots of text | | | lots of text | | |--------------------|--------------------|
Eventually, I managed to get equal height by using foundation's data-equalizer: https://get.foundation/sites/docs/equalizer.html
As I was using foundation in this webapp already, this was a perfect match.
I still consider myself a relative foundation newbie, so at first I did not know what to search for in the docs.