使用jQuery调整两个静态宽度面板之间的iframe大小

时间：2012-01-24 05:15:19

标签： jquery html iframe resize

我有两个侧面板的设置，一个是float：left，一个是float：right，还有一个iframe。我希望两个侧面板的宽度始终为150px，而iframe则填充页面的其余部分。我试图使用jQuery来做这个，以便在调整窗口大小时动态地更改iframe宽度，但它不起作用。以下是我到目前为止的情况：

<body>

...

<script src="jquery.js">

        function setFrameSize() {
            $("#ifrm").width($(window).width() - $("#leftPanel").width() - $("#rightPanel").width());
        }

        $(window).resize(function() { setFrameSize(); });

        $(document).ready(function() { setFrameSize(); });

        </script>

...
</body>

谁能告诉我为什么这不起作用？谢谢！

1 个答案:

答案 0 :(得分：1)

使用CSS做得更好：

http://jsfiddle.net/7pbJb/

HTML：

<div id="left"></div>
<div id="center"></div>
<div id="right"></div>

CSS：

div{
    position:fixed;
    height:500px;}
#left{
    background:blue;
    left:0px;
    width:150px;
}
#center{
    background:green;
    right:150px;
    left:150px;
}
#right{
    background:orange;
    right:0px;
    width:150px;
}

设置中心div的左右位置会使其伸展。