Streaming live at 10am (PST)

How to define Column Height as a Percentage of the Screen Size?


When I try to define a column as a percentage of the screen height the size of the column doesn't change and the contents of said column disappear!

Am I unable to define columns as a percentage?

On a related Note, I cannot add CSS to a Columns element. Instead of adding a class to the element, it creates a new blank section with the class. Why?


I'm still experimenting with it but so far I don't recommend to style the columns or the rows. Add a div in columns and style the div. A dimension expressed in percentage only works when a parent has a defined height. It's not always possible, that's why Javascript is often used to calculate elements dimensions, because HTML/CSS aren't always capable of it.

However, if you set body to height 100% then a section to height 100% you'll have a section that fille the heigh, full browser. Now drag a row element in the section, give it a class and set height 100%, select the column and give it a class and height 100%, drag a div inside the columns and give it a class and height 50% : your div, which represent your column, is now 50% of your screen in height.

Here section is blue, column is green and div is yellow

here the column has a 50% height.