CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Randy Minder
Randy Minder

Reputation: 48402

How can I adjust the height of an element based on viewport size?

I have a Bootstrap 3 app and a page that contains a Google map. I'd like to adjust the height of the map based on a percentage of the viewport height. At the moment I have the height hard-coded to 400px (see below). But, I'd like to use roughly 75% of the viewport height. Is there a way I can do this?

<div class="row">
    <div id="googleMap" style="height:400px;"></div>
</div>

Upvotes: 0

Views: 1131

Answers (1)

DRD
DRD

Reputation: 5813

Use viewport units and vh in particular. For older browsers just use a polyfill: http://html5polyfill.com/. I use it for my site and it works good.

Upvotes: 3

Related Questions