0

I'm struggling to get a map, which is embedded via an iframe on a WordPress page, to show responsively on full height of the screen, independent of the device: http://www.svalbox.no/map.

Full height means, the bottom of the map should not extend beyond the screen, i.e. the user should not have to scroll down to see the full app. The upper limit is obviously the navigation bar.

In the WP page editor, I included the following HTML/CSS (taken from various sources):

<style>
.embed-container {
   position: relative; 
   height: 0; min-height:550px; 
   padding-bottom: calc(60rem + 10px); 
   max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container iframe{
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%;
} 

small{
   position: absolute; 
   z-index: 40; 
   bottom: 0; 
   margin-bottom: -15px;
}
</style>

<div class="embed-container">
    <small><a>href="http://unis78.maps.arcgis.com/apps/webappviewer/index.html?id=68c88c8c310a4c42bccd6ec41dbc04ea" style="color:#0000FF;text-align:left" target="_blank">View larger map</a></small>
    <br>
    <iframe width="940" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Svalbox" src="http://unis78.maps.arcgis.com/apps/webappviewer/index.html?id=68c88c8c310a4c42bccd6ec41dbc04ea"></iframe>
</div>

It works for the width, which adapts to the viewport size. Whatever I try though (setting various height: 100%) doesn't work: either nothing happens or the whole map app shrinks to 40px... I know some HTML/CSS, but this one bugs me obnoxiously since hours..

Any help is appreciated.

Thanks Nils

nilsnolde
  • 199
  • 1
  • 12
  • It's a bit unclear what you're trying to do. You've set the `padding-bottom` to be `60rem + 10px`, which means the height of the element will be at least that tall, or `550px`, which ever is larger. So, if the viewport is smaller than either of those, it's not going to respond. You may want to look into [the `vh` unit](https://www.quirksmode.org/css/units-values/viewport.html) for setting the height. – Heretic Monkey Sep 06 '18 at 14:44
  • Possible duplicate of [CSS 100% height with padding/margin](https://stackoverflow.com/questions/485827/css-100-height-with-padding-margin) – Heretic Monkey Sep 06 '18 at 14:45

1 Answers1

0
.embed-container{height:100vh;}

vh unit stands for percent of viewport(browser window) height. 100vh will give 100% of browser window height to the element. currently support for vh unit is limited(https://caniuse.com/#search=vh)

guilemon
  • 132
  • 12
  • thanks for the suggestions! I tried that before, but it wouldn't work.. See http://www.svalbox.no/map-2/, sorta minimal example. The `width` property works fine, but `height` is just not responding. To be clear, I'd like to have the map iframe take up the entire viewport except for the nav bar. Do I need to give every parent `div` a height of 100%? – nilsnolde Sep 06 '18 at 20:59
  • 1
    @nnolde you can use `height:100vh` on iframe component. But the support for `vh` is limited. Check here: https://caniuse.com/#search=vh – guilemon Sep 10 '18 at 06:52
  • sorry for the late answer, was busy with other things. @guilemon, your suggestion worked. Though I had to set the `height=100vh` on the `embed-container` class and the iframe keeps 100%. Nevertheless, if you wanna post this as an answer, I'll accept. – nilsnolde Oct 01 '18 at 11:39