iframe 的对齐方式答案

【问题标题】：Alignment of iframeiframe 的对齐方式
【发布时间】：2020-01-25 01:20:34
【问题描述】：

使用这个question 作为起点，我做了一些改变以符合我的目的。不幸的是，我似乎无法将其保存在 jsfiddle 中，因为保存结果后总是“404 该页面不存在”。

/* In a Reset CSS */

body, div {
    margin: 0;
    padding: 0;
}

/* Style CSS */

html, body { height: 100%; }

body {
    position: relative;
    background: #F4F4F4;
}

iframe#iframe {
    width: calc(100% - 200px);
    height: calc(100% - 100px);
    overflow: hidden;
}

div#sidebar {
    top: 0;
    right: 0;
    position: fixed !important;
    height: 100%;
    width: 200px;
    background: gray;
}

div#bottombar {
    bottom: 0;
    height: 100px;
    width: 100%;
    background: black;
    z-index: -1;
}

<iframe id="iframe" name="iframe1" frameborder="0" height="100%" width="100%" src="http://someurl.com"></iframe>

<div id="bars">
     <div id="bottombar"></div>
     <div id="sidebar"></div>
</div>

结果是，iframe 以某种方式居中显示。但是我想让它与左上角对齐，以便嵌入内容的左侧部分可见。

我在 HTML iframe 定义中尝试了align="left" 和其他，但无济于事。

我需要做什么才能使 iframe 的内容左上对齐？

【问题讨论】：

style="float:left" 也不起作用。所有这些似乎都用于对齐 iframe 本身。但我需要的是对齐 iframe 的内容。

标签： html css iframe alignment

【解决方案1】：

在我看来，您的 iframe 显示正确，但由于position: fixed，侧边栏只是与 iframe 重叠。我在 CSS 中进行了一些更改，并使用百分比而不是像素，以使其具有响应性。

让我知道它是否适合你。

/* In a Reset CSS */
body,
div {
  margin: 0;
  padding: 0;
}

/* Style CSS */
html,
body {
  height: 100%;
}

body {
  position: relative;
  background: #F4F4F4;
}

iframe#id_iframe {
  width: 70%;
  float:right;
  height: 100%;
  overflow: hidden;
}

div#id_sidebar {
  float:left;
  height: 100%;
  width: 30%;
  background: lightgray;
}

【讨论】：