时间戳

首页 > 解决方案 > CSS：来源外部 html 不填充水平空间

html - CSS：来源外部 html 不填充水平空间

问题描述

问题

我div和iframe完美地填充水平空间，但如果我获取 HTML 文件，那么只有中间部分被 HTML 文件填充。左右区域变为白边。

页面HTML是这样的

    <div class="mainframe">
        <iframe class="helppage" src="./help_en.html"></iframe>
    </div>

help_en.html是外部 HTML 文件。

div 的 CSS

div.mainframe {
    /* fix: mainframe does not fill browser window */
    display: flex;
  flex-flow: column;
  /* flex-grow: 1; */
  height: 100%;
   /*CAUTION: must use background composite to foreground image*/
  background: url('images/bg-logo.png') no-repeat top right, #2a2f39;
  /*on-demand y-scrollbar*/
  overflow-y: auto;
  
}
iframe.helppage {
  /* fix: mainframe does not fill browser window */
  display: flex;
  flex-flow: column;
  height: 100%;
  /* flex-grow: 1; */
   /*CAUTION: must use background composite to foreground image*/
  background: url('images/bg-logo.png') no-repeat top right, #2a2f39;
  /*on-demand y-scrollbar*/
  overflow-y: auto;
}

尝试

我试过使用

width: 100%;
flex-grow: 1;

但没有任何改变。

问题

如何让 HTML 文件显示区域跨越整个mainframediv？

标签： htmlcssflexbox

解决方案

自己解决了。

max-width事实证明，问题在于 HTML 文件本身具有嵌入的样式，它body像这样设置自己的样式

body {

...

margin: auto;

max-width: 42em;

...
}

所以我的解决方案是将其设置为


max-width: 100%;

推荐阅读