Question

以iframe为中心的最佳方式是什么？

您是否预见到像这样简单的问题？

<html>
<body>

<iframe src="https://abc.123.com/" width="100%" height="100%"></iframe>



</body>
</html>

Answer 1

这是我的看法：

<html>
<body>

<iframe src="https://abc.123.com/" style="border: none; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

</body>
</html>

你需要这个CSS来确保100％的高度和宽度，以及没有边距或填充。

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

http://jsfiddle.net/PAmDU/

请注意，这可能会导致发现与后退/前进按钮不一致的用户不愿意更改整个页面而不是覆盖整个页面的iframe。如果可能的话，最好避免在这些日子里使用iframe这样的话。

Answer 2

<iframe src="https://abc.123.com/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

这样可以正常工作，但是你仍然会有一个非常小的灰色边框。

要解决此问题，请在CSS中使用：

body {
    margin: 0;
}

Answer 3

如果您确实希望它居中并且宽度不超过100％，请使用以下内容：

<html>
<body style="margin: 0;">
    <div style="margin: 0 auto; width: 500px;"><!--Change this width if you want-->
        <iframe src="http://www.w3schools.com" style="width: 100%; height: 100%; border: none;">
        </iframe>
    </div>
</body>
</html>

我还摆脱了导致滚动条的iframe边框。

以iframe为中心？

3 个答案: