Equal Height Components in Bulma Columns
source link: http://siongui.github.io/2018/01/25/equal-height-components-in-bulma-columns/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Equal Height Components in Bulma Columns
January 25, 2018
Look at the following example. We have three message components in columns of Bulma (version 0.6.2).
Header of Column 1
Header of Column 2
Header of Column 2
Column 3
The column 3 is higher than the other two columns on wide screens, and it looks ugly. We want to make the three messages to be of equal height. (You should not view this page on mobile devices because the columns will be stacked)
The solution [2] is to add height: 100%; to your components. In this case, we add the following rule in CSS:
.message {
height: 100%;
}
After adding height: 100%;, The above example will look like:
Header of Column 1
Header of Column 2
Header of Column 2
Column 3
Now it looks better and should be the result of most designers want.
References:
[4]css - How to set column height equal to longest column in Bulma (flexbox)? - Stack Overflow
Author: Siong-Ui Te ∈ Category: CSS
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK