Search code examples
jqueryhtmlcssviewport

Is it possible to set a minimum viewport height?

I have a page that has a general layout like so:

header {height: 10vh; width:100%; background-color:black;}
#wrapper {height:70vh; width: 100%; background-color: white; }
footer {height:20vh; width: 100%; background-color: grey;}
<header>
</header>
<div id="wrapper">
image 
</div>
<footer>
</footer>

and this looks fine on mobile devices until the screen orientation is changed to horizontal. Is it possible to set a miniumu viewport height? I'm using

<meta name="viewport" content="width=device-width, initial-scale=1">

and tried this 

<meta name="viewport" content="width=device-width, initial-scale=1, min-height=500">

with no luck. Is there a CSS or jQuery method for this?

Solution

  • You could use a media-query for a max-height, maybe also combined with orientation: landscape and put seperate height settings for these elements in there (i.e. the necessary minimum heights), like 

    @media screen and (max-height: 600px) {
  header {height: 100px;}
  #wrapper {height:700px; }
  footer {height:200px;}
}