Minimum vh value (CSS)?

Question

I'm new to using vh/vw values in css, but it's come in handy on my current project, where I want the main content container to fill the whole viewport height. This works fantastically until the viewport is shrunk vertically to around 200/300px, when the layout breaks.

What I want is for it to work exactly as it is (fill the whole screen) but to stop shrinking at a fixed pixel value. However, the following didn't work, as I'd hoped:

.container {
    height: 90vh; 
    min-height: 400px;
}

Can anyone suggest a solution?

Thanks in advance.

Also, if you want a min-height of 400px and you shrink the viewport to 300px what else to you expect? — Paulie_D, Apr 14 '16 at 18:19
My bad... using Angular Material and had the `flex` attribute on my container div which was overriding the `min-height` declaration :/ Thanks anyway! — Paulos3000, Apr 14 '16 at 18:40

score 3 · Accepted Answer · answered Apr 14 '16 at 18:21

3

main content container to fill the whole viewport height

.container {
    height: 100vh; 
    min-height: 300px;
}

1vh — one equal 1/100 height of viewport.

answered Apr 14 '16 at 18:21

Vlad

91
5

Minimum vh value (CSS)?

1 Answers1