我们如何在 iframe 中将要点绘制到全高？

Question

正在尝试让 iframe 在 fs-gist custom element in this demo 中呈现要点以展开以便显示整个要点。

自定义元素 fs-gist 定义了以下主机 CSS：

  static styles = css`
    :host {
      display: block;
      width: 100%;
      height: 100%;
    }
  `;

要点呈现到的 iframe 的内联样式定义如下：

style="width: 100%; height:100%;"

我们怎样才能让 gist 填充到它的完整高度？

在 iframe 中呈现要点的代码如下所示：

  firstUpdated() {
    let fileName = (this.file) ? this.file : ''; 
    this.iframe.id = 'gist-' + this.gistID;
    
    let doc = (this.iframe.contentDocument || this.iframe.contentWindow) as Document;
      let content = `
        <html>
        <head>
          <base target="_parent">
        </head>
        <body onload="parent.document.getElementById('${this.iframe.id}')">
        <script type="text/javascript" src="https://gist.github.com/${this.gistID}.js?file=${fileName}"></script>
        </body>
      </html>
    `;
    doc!.open()
    doc!.write(content)
    doc!.close()
  }

iframe 模板如下所示：

  render() {
    return html`
      <iframe id="gist" type="text/javascript" frameborder="0" style="width: 100%; height:100%;"></iframe>
    `;
  }

This is the source code for the custom element fs-gist

Answer 1

试试这个：

<body style="height: 100vh;">
  <fs-gist gistID="fireflysemantics/054716730103cd205c39167054542f68">
  </fs-gist>
</body>

将主体的高度设置为 100vh 允许 fs-gist 元素在其中扩展。

演示： https://stackblitz.com/edit/typescript-fs-gist-set-body-height-demo

Answer 2

您可能想尝试一下 CSS Flex (W3Schools)。这是我如何使用 flex 容器进行水平和垂直大小调整的示例。这是我的 iFrame 中 src 页面 'embedded' 的 CSS，其大小会自动调整为高度和宽度。 iFrame 嵌入到响应式页面中，当在移动设备上旋转或在桌面上调整浏览器大小时 window 会相应调整大小。

.flex-container-horizontal
{
    display: flex;
    align-items: stretch;
    width: 100%;
}

.flex-container-vertical
{
    display: flex;
    align-items: stretch;
    align-content: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    min-height: 120px;
    justify-content: flex-start;
    width: 100%;
}

.flex-container
{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px;
    text-align: left;
}

我们如何在 iframe 中将要点绘制到全高？

How do we paint a gist to its full height inside an iframe?

html

javascript

css

web-component

lit-element