Question

在多列中呈现flexbox粘性页脚时出现问题。在正常页面上，一切正常，没有任何问题，如下面的屏幕截图所示：

当我将相同的代码放到iframe中时，这些框会变得太大，在以下屏幕截图中可以看到：

有什么主意，我想如何在iframe中获得正确的结果，同时保持（完整的）页面填充iframe？

一支笔是available。屏幕截图和笔基于以下代码：

HTML

<div class="iframe-wrapper">
  <iframe src="about:blank" class="iframe"></iframe>
</div>

<template class="iframe-header">
  <style>
    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
    */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    ol, ul {
      list-style: none;
    }
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    /* end reset */

    html {
      font-size: 9px;
    }

    body {
      background: #b6dce2;
      font-family: sans-serif;
      font-size: 2rem;
      line-height: 3rem;
    }

    .container {
      width: 1024px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 18px;
      padding-right: 18px;
    }

    .row {
      box-sizing: border-box;
      display: flex;
      flex: 0 1 auto;
      flex-direction: row;
      flex-wrap: wrap;
      margin-right: -18px;
      margin-left: -18px;
    }

    .row > * {
      box-sizing: border-box;
      padding-right: 18px;
      padding-left: 18px;
      flex-basis: 100%;
      flex-grow: 1;
      width: 100%;
    }

    .col {
      flex-basis: 50%;
      max-width: 50%;
      width: 50%;
    }

    .box {
      background: #fff;
      padding: 2rem;
      height: 100%;
      border-radius: 8px;
      box-sizing: border-box;
    }

    .sticky-footer {
      display: flex;
      flex-direction: column;
    }

    .sticky-footer > *:nth-last-child(2) {
      flex: 1 1 auto;
    }

    .btn {
      border: none;
      background: #1dc9e4;
      padding: 1em 2em;
      width: 100%;
    }
  </style>
</template>

<template class="iframe-content">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="box sticky-footer">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec posuere lacus.</p>
          <button type="button" class="btn">Sticky button</button>
        </div>
      </div>
      <div class="col">
        <div class="box sticky-footer">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec posuere lacus. Mauris ultricies lacinia nisl, at laoreet erat cursus sit amet.</p>
          <button type="button" class="btn">Sticky button</button>
        </div>
      </div>
    </div>
  </div>
</template>

CSS

html, body {
  height: 100%;
}

body {
  background: #ccc;
}

.iframe-wrapper {
  height: 100%;
}

.iframe-wrapper iframe {
  height: 100%;
  width: 100%;
}

JS

const iframe = document.querySelector(".iframe").contentWindow.document;

// load templates
const header = document.querySelector(".iframe-header").innerHTML;
const content = document.querySelector(".iframe-content").innerHTML;

// initialise iframe with templates
iframe.querySelector("head").innerHTML = header;
iframe.querySelector("body").innerHTML = content;

iframe中的Flexbox多列粘性页脚

0 个答案: