2

I am using four iframes: header, menuframe,bodyframe and footer. The menuframe and bodyframe are placed side-by-side. There is a space between the footer and the menuframe and bodyframe. How do I remove it?

css:

iframe{
    border:0;
    margin:0;
}
iframe.menuframe{
    border:0;
    margin:0;
    width:183px;
}
iframe.bodyframe{
    border:0;
    margin:0;
    width:300px;
}

html:

<iframe name="header" src="Header.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; width:100%; height:110px;"></iframe>
<iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;"></iframe>
<iframe name="bodyframe" src="Home.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;"></iframe>
<iframe name="footer" src="Footer.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; width:100%; height:25px;"></iframe>
4

2 回答 2

0

将此用于您的主要 IFRAME 样式（注意显示：添加了块）：

iframe{
    border:0;
    margin:0;
    display:block;
}

并将其用于您的 menuFrame 声明（注意 float:left 添加）：

<iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;float:left;"></iframe>

这是一个工作示例： http: //jsfiddle.net/tU8XN/1/（不要介意“找不到页面”丢失页面）

顺便说一句，你的其他 2 个类iframe.menuframe没有iframe.bodyframe效果，因为这种格式的目标是类声明而不是元素的名称。

于 2013-08-08T19:42:32.487 回答
0

1）您必须添加：

<style>iframe { display:block; } </style>

在您的样式表或页面标题中。这是因为 iframe 默认是内联的。这意味着它们将被放置在文本基线上，即。'a' 的底部结束的地方，而不是 'y' 的底部结束的地方。您看到的间隙是文本行中的下行空间。这应该删除它。

2）您必须添加属性：

seamless='seamless'

到您的每个 iFrame：在 HTML5 中，不再支持属性 frameBorder。

3）您必须添加：

float:left;

到你的'menuframe' iframe，所以 adiacent iframe 会出现在它的右边。

此更改应该适用于大多数浏览器。

所以你的代码应该是这样的：

<!DOCTYPE html>
<html>
    <head>
        <style>iframe { display:block; } </style>
    </head>
    <body style="margin:0;padding:0">
        <iframe name="header" src="Header.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="width:100%; height:110px;"></iframe>
        <iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="float:left;height:590px;"></iframe>
        <iframe name="bodyframe" src="Home.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="height:590px;"></iframe>
        <iframe name="footer" src="Footer.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="width:100%; height:25px;"></iframe>
    </body>
</html>

注意：我删除了一些无用的样式属性。这些答案采取了一些解决方案：

从 IFrame 中删除边框

HTML：iframe 元素之间的奇怪空间？

于 2013-08-08T19:50:07.467 回答