CSS布局中，如何通过设置iframe的padding和高宽（100%）来达到让iframe居中的效果

huguojunsy 2012-03-07 10:26:18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
.grid
{
border: solid 1px #000;overflow: hidden;width:200px;height:200px;
}
.gridIframe
{
width: 100%;height: 100%;padding:50px;border: solid 1px #ccc;
}
</style>
<head>
<body>
<div class="grid" style="left:10px;top:10px;">
<iframe src="http://www.baidu.com" id="if_100_101" class="gridIframe"></iframe>
</div>
</body>
</html>

...全文

1509 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq731619941 2014-11-27

打赏
举报

3QLZ 解决了我的问题

冰镇宝贝321 2012-03-09

打赏
举报

将iframe放在div内控制div看看呢

myvicy 2012-03-08

打赏
举报

js计算控制吧。

三石-gary 2012-03-08

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <style type="text/css">

        .grid

        {

            border: solid 1px #000;

            overflow: hidden;

            width: 200px;

            height: 200px;

            text-align: center;

            margin-right: auto;

            margin-left: auto;

        }

        .gridIframe

        {

            width: 100%;

            height: 100%;

            padding: 50px;

            border: solid 1px #ccc;

        }

    </style>

    <head>

        <body>

            <div class="grid">

                <iframe src="http://www.baidu.com" id="if_100_101" class="gridIframe"></iframe>

            </div>

        </body>

</html>

是这样？

Acesidonu 2012-03-08

打赏
举报

自己计算好了就ok了，要不就用js进行控制。不是动态改变的还是计算的方便。
其他的方法我没弄过。

京郊-金手指 2012-03-08

打赏
举报

可以将iframe放在div内，给iframe设置自适应，div设置居中

huguojunsy 2012-03-07

打赏
举报

[Quote=引用 1 楼 acesidonu 的回复:]
.gridIframe {
width: 100px;height: 100px;padding:50px;border: solid 1px #ccc;
}

设置宽度和高度为100%再加上两边的padding为50px已经超出了200px
实际宽度和高度都为300px了，肯定不行的。

要计算好宽度和高度。
[/Quote]

你好，但是奇怪的是，如果去掉第一行的doctype，在ie8下是正常的。

或者有没有其他办法，设置padding后，iframe充满剩下的空间？

Acesidonu 2012-03-07

打赏
举报

.gridIframe {
width: 100px;height: 100px;padding:50px;border: solid 1px #ccc;
}

设置宽度和高度为100%再加上两边的padding为50px已经超出了200px
实际宽度和高度都为300px了，肯定不行的。

要计算好宽度和高度。