Question

我正在努力获取一张通过iframe嵌入在WordPress页面上的地图，以在屏幕的整个高度上响应显示，而与设备无关：http://www.svalbox.no/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>

它适用于宽度，它适合视口大小。无论我如何尝试（设置各种height: 100%）都无法正常工作：要么什么都没发生，要么整个地图应用缩小到40像素...我知道一些HTML / CSS，但是自从几个小时以来，这令人讨厌。 / p>

感谢您的帮助。

谢谢尼尔斯

Answer 1

import { Component, OnInit, ViewChild } from '@angular/core';
import { MockDataService } from '../../shared/services/mock-data.service';
import { DataTable } from 'primeng/primeng';

@Component({
  selector: 'app-turbotable-deluxe',
  templateUrl: './turbotable-deluxe.component.html',
  styles: []
})
export class TurbotableDeluxeComponent implements OnInit {
  @ViewChild('dt')
  dt: DataTable;

  people$;
  cols;

  constructor(private mockdata: MockDataService) {}

  ngOnInit() {
    this.people$ = this.mockdata.get('people_100.json');

    this.cols = [
      { field: 'first_name', header: 'First Name' },
      { field: 'last_name', header: 'Last Name' },
      { field: 'age', header: 'Age' },
      { field: 'email', header: 'Email' },
      { field: 'country', header: 'Country' }
    ];
  }

.embed-container{height:100vh;}单位代表视口（浏览器窗口）高度的百分比。 100vh将为元素提供浏览器窗口高度的100％。当前对vh单位的支持是有限的（https://caniuse.com/#search=vh）

自定义CSS，以使div / iframe响应全屏高度

1 个答案: