Jquery ui 脱离容器的绝对div

点击“Lead With Style”，它会自动将您置于“Calls 1-6”下

正如您可能看到的，页面右侧的内容正在脱离其容器。这不是浮动问题，但可能与绝对定位和显示有关

我正在使用jQuery选项卡和jQuery手风琴。我找到并修改了此脚本，但它不起作用：

$(function() { 
    var parentHeight = $('#accordion').height(), 
        childHeight = $('.ui-tabs-panel').height(); 

    if (parentHeight <= childHeight) { 
        $('#accordion').height(childHeight); 
    } 
});

以及HTML：

<div id="main-content">
    <h1>Welcome, Leader!</h1>
    <hr />
    <h2>SECTIONS</h2>
    <div id="accordion">
        <h3>Coaching and Mentoring</h3>
        <div id="sec-1">
            <ul>
                <li><a href="sections/lead-with-style/1-1">Under Construction</a></li>
            </ul>
        </div>
        <h3>Lead With Style</h3>
        <div id="sec-2">
            <ul>
                <li><a href="sections/lead-with-style/2-1">Calls 1-6</a></li>
            </ul>
        </div>
        <h3>Moving Up</h3>
        <div id="sec-3">
            <ul>
                <li><a href="sections/lead-with-style/3-1">Compensation Plan Videos</a></li>
            </ul>
        </div>
        <h3>Dan Clark Leadership</h3>
        <div id="sec-4">
            <ul>
                <li><a href="sections/lead-with-style/4-1">Tab 1</a></li>
            </ul>
        </div>
        <h3>New Rep Coaching</h3>
        <div id="sec-5">
            <ul>
                <li><a href="sections/lead-with-style/5-1">Advisor Checklist</a></li>
                <li><a href="sections/lead-with-style/5-2">Six Weekly Emails</a></li>
            </ul>
        </div>
        <h3>Monthly Meetings</h3>
        <div id="sec-6">
            <ul>
                <li><a href="sections/lead-with-style/6-1">How to Hold an Effective Meeting</a></li>
                <li><a href="sections/lead-with-style/6-2">Monthly Basic Meeting Agenda</a></li>
                <li><a href="sections/lead-with-style/6-3">Monthly Agenda Details</a></li>
                <li><a href="sections/lead-with-style/6-4">More Info</a></li>
            </ul>
        </div>
        <h3>Communication Skills</h3>
        <div id="sec-7">
            <ul>
                <li><a href="sections/lead-with-style/7-1">Under Development</a></li>
            </ul>
        </div>
    </div>
</div>

欢迎，领导！

部分
辅导和指导



引领潮流



向上移动



丹克拉克领导



新代表辅导




月会






沟通技巧

绝对位置肯定会毁了你的团队，所以让我们用CSS和jQuery解决这个问题：

.ui-tabs-panel {
  overflow: auto;
}

这将给我们一个滚动条，如果内容是“太长”。什么太长了？这就是我们使用jQuery的地方：

$('.ui-tabs-panel').css("height", $('#accordion').innerHeight()+"px");

我们强制制表符内容具有与手风琴相同的高度。现在我们有了一个“太多”的指标，它看起来是正确的（当然，尽管滚动条可能不美观）

请注意，为了在大小不太严格的容器中保持这种行为，每当调整浏览器大小时，必须重新绑定高度，这将需要更多jQuery。让我们总结一下上面的代码：

function makeAccordionContentFit() {
  $('.ui-tabs-panel').css("height", $('#accordion').innerHeight()+"px");
}

// make it work right now!
makeAccordionContentFit();

// also make it work on document resize...
$(document).resize(makeAccordionContentFit);

---

您的页面看起来有一个固定大小的容器，但它对未来总是一个很好的计划。

啊，那不行。页面容器也不是固定大小；#main content div会扩展到手风琴的大小，但不会扩展到选项卡的大小，这正是我要做的。谢谢你的回复！

function makeAccordionContentFit() {
  $('.ui-tabs-panel').css("height", $('#accordion').innerHeight()+"px");
}

// make it work right now!
makeAccordionContentFit();

// also make it work on document resize...
$(document).resize(makeAccordionContentFit);