Question

我正在尝试创建一个可调整大小的内容窗格，当在页面的主要内容侧单击不同的链接时，该窗格将从本地文件¹加载。

我尝试了两种方法。第一种是使用＆lt; div＆gt;，但我没有找到一种从外部源²以这种方式加载的好方法。所以我在div中使用iFrame。

但是，我在使用iFrame正确调整主要内容时遇到了一些麻烦。使用类似的代码，pure-div版本可以正确调整大小： http://jsfiddle.net/jvnn6/4/

但是，当我尝试使用iFrame时，页面左半部分的内容未正确调整大小。 http://jsfiddle.net/JX4yM/

在这里，我添加了以下CSS：

  .ui-resizable-helper {
    border: 50px solid rgba(239, 239, 239, .9);
    margin: -75px;
}

这是jQuery

helper: "ui-resizable-helper",

发生了什么事？（我不得不添加.ui-resizable-helper，因为当鼠标移动到iFrame上时，调整大小会很奇怪。这是一个例子：http://jsfiddle.net/36S7p/1/）

=============================================== =====================

¹：我不打算很快在线主持

²：当然，另一种方法是将所有内容嵌入我的网页本身，然后根据需要隐藏/显示右侧窗格中的不同部分。然而，有一些结构性问题，我不会进入。

Answer 1

从Javascript窗格中取出<script>标签，你就是金色的。您还需要获取正文宽度而不是文档宽度。

$('#resizable').on("resize", function (event, ui) {
     var setWidth = $("#resizable").width();
     $(".content").width($("body").width() - setWidth);
});

<强> Updated Fiddle

Div vs. iFrame - 调整大小问题

1 个答案: