html iframe 未到达窗口底部

Posted

技术标签:

【中文标题】html iframe 未到达窗口底部【英文标题】:html iframe does not reach bottom of window 【发布时间】:2017-03-13 12:55:50 【问题描述】:

我正在尝试创建一个包含三个水平部分的网页——标题、菜单和内容部分。我的问题是,当我这样做时,底部 iframe 不会靠近浏览器窗口的底部。我想知道是否有人可以告诉我我做错了什么。我的 html 看起来像:

<!DOCTYPE html>
<html>
<head>
<style> </style>
</head>
<body>
<iframe src="title.htm"  height=90 
    style=" position:absolute; 
            top:0; left:0; 
            border:1px solid grey;" 
    name="title_frame">
    <p>Your browser does not support iframes</p>
</iframe>
<iframe src="hmenu.htm"  height=70 
    style=" position:absolute; 
            top:90px; 
            left:0; 
            border:1px solid grey;
            margin:0px 0px 0px 0px;" 
    name="hmenu_frame">
</iframe>
<iframe src="startpage.htm"  
    style=" position:relative; 
            top:160px;
            vertical-align:bottom;
            border:1px solid grey;"
    name="content_frame">
</iframe>
</body>
</html>

没有包含 CSS。我正在使用 Chrome 进行预览,最后一个 iframe 的底部大约在窗口的中间。我尝试过使用绝对位置,玩过高度,并尝试过垂直对齐:底部,但似乎都不起作用。

【问题讨论】:

对不同的页面部分使用 iframe 不是最好的方法。为什么不简单地使用&lt;section&gt; 标签? 谢谢。我以前没有听说过分区。我只是快速查找了一下,似乎该部分不支持 src 属性——所以如果我单击一个菜单项,是否可以在不重新加载整个页面的情况下加载该部分的内容? (注意,菜单中运行了一些 javascript,所以除非绝对必要,否则我不希望重新加载它)。 好的,我明白了。使用部分,您将不得不在一个 html 文件中使用所有代码 - 因此仅通过单击菜单项重新加载一个部分是行不通的。请参阅此问题,了解使用 iframe 是否是不好的做法:***.com/questions/362730/… 好的,在玩了一会儿之后,我想我真的想使用 iframe——我希望标题和菜单保持加载状态,并保持在屏幕顶部我在内容窗口中向下滚动。这是针对一个非常具体的站点,它没有任何 soe 或安全问题,所以这些与我无关。这让我回到我原来的问题,为什么我的 iframe 没有到达窗口的底部...... 好的,经过一番搜索,我找到了this,这似乎可行。 【参考方案1】:

这是一个使用display: flex;&lt;section&gt; 标签而不是iframe 的简单解决方案。 flex-direction: column; 的宽度,请确保您的内容部分彼此重叠显示,而不是连续显示。

这样,您不需要进行所有定位,并且您的标记和样式保持简洁。

html,
body 
  height: 100%;
  margin: 0;

body 
  display: flex;
  flex-direction: column;

section 
  width: 100%;
  box-sizing: border-box;
  border: 1px solid grey;

.title 
  height: 90px;

.hmenu 
  height: 70px;

.content 
  height: 100%;
<section class="title">...</section>
<section class="hmenu">...</section>
<section class="content">...</section>

【讨论】:

【参考方案2】:

我建议稍微改变一下你的方法。这可以使用 flexbox 轻松实现。请记住,不建议在您的上下文中使用iframes。您可以在this fiddle 中看到最终结果。

首先,从您的iframes 中删除relativeabsolute 定位。它们不是必需的。接下来,将display: flex; flex-direction: column; 设置为body。因为您正在设置边界(并且因为它可以为您节省很多麻烦),所以在您的 iframes 上添加 box-sizing: border-box;

html, body   
  height: 100%;
  padding: 0;
  margin: 0;


body 
  display: flex;
  flex-direction: column;


iframe 
  box-sizing: border-box;

【讨论】:

您是第二个说不推荐上下文中的 iframe 的人。你能详细谈谈? (抱歉,就像我说的,我是新手,边走边学——我想了解其中的原因)。 您可以在互联网上找到许多有关使用iframes 的资源。您将听到的最大问题是安全性。另一个原因是“语义”。您应该尝试使用描述内容的最佳元素(这就是@Andreas 推荐sectionss 的原因)。 iframe 没有任何“意义”,它只是将代码“注入”到您的页面中。

以上是关于html iframe 未到达窗口底部的主要内容,如果未能解决你的问题,请参考以下文章

点击 iframe → 父窗口滚动到位置?

在页面滚动的底部粘贴元素

iframe /span 下的链接无法点击

html页面怎样固定头部和底部,中间用iframe标签插入页面

在顶部/底部嵌入 iframe

Iframe 中的 Javascript 未执行