Javascript jQuery可调整大小移动我的div

我正在尝试构建一个包含3个可调整大小的div的页面。 第一个在左边，叫做“中间探索者” 第二个在底部，称为“中间控制台” 最后一个在左边，叫做“中间信息”

问题是，当我尝试调整第二个和最后一个的大小时，它们仍然不在应该调整的位置。。。 你自己看一看

这是我的页面：

<header>
        <div id="header_logo">header_logo</div>
        <div id="header_controls">header_controls</div>
    </header>
    <section id="middle">
        <div id="middle_controls">middle_controls</div>
        <div id="middle_workarea">
            <div id="middle_explorer" class="sidebar">middle_explorer</div>
            <div id="middle_main">
                <div id="middle_codecontainer">middle_codecontainer</div>
                <div id="middle_console">middle_console</div>
            </div>
            <div id="middle_info" class="sidebar">middle_info</div>
        </div>
    </section>
    <footer>
        <div id="footer_date"></div>
    </footer>

这是我刚才说的代码：

/* Adjust the #middle height according to the header and the footer */
function middleHeight () {
    $("#middle").height($(document).height() - $("header").height() - $("footer").height());
}
/* Adjust the #middle_workarea height according to the #middle_controls div height (37px) */
function workareaHeight () {
    $("#middle_workarea").height($("#middle").height() - 37);
}
/* Adjust the #code_main width according to the #middle_explorer, #middle_info */
function mainWidth () {
    var width = ($("#middle_workarea").width() - $("#middle_explorer").width() - $("#middle_info").width());
    $("#middle_main").width(width);
}
/* Adjust the #middle_codecontainer height */
function codecontainerHeight (){
    var height = ($("#middle_workarea").height() - $("#middle_console").height());
    $("#middle_codecontainer").height(height);
}

下面是我用来调整div大小的代码：

$("#middle_explorer").resizable({ handles: "e"});
$("#middle_info").resizable({ handles: "w"});
$("#middle_console").resizable({ handles: "n", maxHeight: $("#middle_codecontainer").height()});

---

正如您所见，调整大小时，“中间”资源管理器保持固定在左侧，但其他两个没有，我真的不明白我做错了什么。

如果您想要答案，您应该在此处发布一些代码。如果您知道CSS在此处非常重要，您可能希望包含它。

$("#middle_explorer").resizable({ handles: "e"});
$("#middle_info").resizable({ handles: "w"});
$("#middle_console").resizable({ handles: "n", maxHeight: $("#middle_codecontainer").height()});