html - 自定义 CSS 使 div/iframe 响应全屏高度

Question

我正在努力获取通过 WordPress 页面上的 iframe 嵌入的 map ，以在屏幕的整个高度上响应地显示，独立于设备:http://www.svalbox.no/map .

全高意味着 map 的底部不应超出屏幕，即用户不必向下滚动即可看到完整的应用程序。上限显然是导航栏。

在 WP 页面编辑器中，我包含了以下 HTML/CSS(取自各种来源):

<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>

它适用于适应视口(viewport)大小的宽度。无论我尝试什么(设置各种 height: 100%)都不起作用:要么没有任何反应，要么整个 map 应用程序缩小到 40px...我知道一些 HTML/CSS，但这让我很烦几个小时以来令人讨厌..

感谢任何帮助。

谢谢尼尔斯

Answer 1

.embed-container{height:100vh;}

vh 单位代表视口(viewport)(浏览器窗口)高度的百分比。 100vh 将为元素提供 100% 的浏览器窗口高度。目前对vh 单位的支持是有限的( https://caniuse.com/#search=vh )