Menu icon Foundation
Full height column (100vh)

Hey everyone,

On my personal website (http://www.thierrygeldof.nl) I'm trying to create a full height column with CSS only. To achieve this I'm using 100vh on .columns.

When I'm viewing my website on my 1080p monitor everthing is fine, if I open my website on a smaller screen or resize my browser (Chrome) the 100vh doesn't seem to work...

I want the div with the image-background to be the same height (100vh) as the divs at the left.

Can somebody help me with this?

-Thierry

Mvizqyr

fullheight100vhcolumncolumns

Hey everyone,

On my personal website (http://www.thierrygeldof.nl) I'm trying to create a full height column with CSS only. To achieve this I'm using 100vh on .columns.

When I'm viewing my website on my 1080p monitor everthing is fine, if I open my website on a smaller screen or resize my browser (Chrome) the 100vh doesn't seem to work...

I want the div with the image-background to be the same height (100vh) as the divs at the left.

Can somebody help me with this?

-Thierry

Mvizqyr
Rafi Benkual about 4 years ago

I think the issue is that there is no height set on the top left column. It might be easier to make the left column 100vh and the right column 100vh then the content inside, height 50%;

Rafi Benkual about 4 years ago
Thierry Geldof about 4 years ago

Hey Rafi,

Thanks for your reply.

It doesn't seem to work on my screen? Screenshot: http://puu.sh/kHVCW/ba13e3e2bb.png.

Rafi Benkual about 4 years ago

I added borders so you can see the box height. I didn't adjust the image to fit. So you can see both columns are the same height and the contents of the left column and 50% height each.

Thierry Geldof about 4 years ago

Aha, I see... The image was confusing me :)

I will try this.