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

发布于 2024-12-28 12:20:31 字数 583 浏览 0 评论 0原文

我有一个带有两个侧面板的设置，一个为 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>

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

原文

I have a setup with two side panels, one as float:left and one as float:right, and an iframe in between them. I want the two side panels to always have a width of 150px, and the iframe to fill the rest of the page. I am attempting to do this using jQuery to make functions that change the iframe width dynamically when the window is resized, yet it is not working. Here is what I have so far:

<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>

Can anyone tell me why this is not working? Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

就像说晚安 2025-01-04 12:20:31

使用 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 的左右位置会导致其拉伸。

It's much better to do it with 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;
}

Setting the left and right position of the center div causes it to stretch.

回复收藏 0 原文

~没有更多了~