Streaming live at 10am (PST)

100% height of corresponding columns


#1

I have a site built with the main structure being 3 responsive columns.

I want columns 2 and 3 to always be 100% height of column #1. How would I accomplish this?

https://preview.webflow.com/preview/joe-bennie?preview=2a4027f718247750102d0f0dcec36b14


#2

Are you going for this look @Sara_Strese?


#3

yes, I want the right 2 columns to always be 100% of the browser or 100% of the content (the about page is an example of this).


#4

If you give your rows a set height of say 100vh (type in 100vh to the height piece, this will make the row 100% height of the viewport height). Then give your columns a height of 100%, the columns will go full height of the row.

For the "home_navigation_box" class you can set its height to 33.33vh to get the spacing you're using on the right. Make some adjustments to your padding/margin used on the left hand side of the page on the home page to make everything fit in the viewport.

However as you move to mobile landscape/portrait view, you will want to give all main parent elements an actual pixel height or a height of auto, and position to relative (depending on how the div is built) to make sure that your elements don't lose their structure. You'll need to do this because "VH" style references the viewport height, a landscape phone viewport isn't very tall.

Please let me know if you have any questions. :smile:

Thank you,

Waldo


#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.