绝对 div 转义其容器

Question

http://micheresources.com/html/miche-u/lead-with-style

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

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

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

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

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

这里是相关的 CSS：

#main-content {
    background-color: rgba(255,255,255,.5);
    padding: 35px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    position: relative;
}

#accordion { position: relative; }
    #accordion h3 {
        width: 220px;
        margin: 0;
        padding: 4px 0 8px;
        font-size: 1.1em;
        cursor: pointer;
        outline: none;
        color: #6a6a6a;
    }

#accordion > div > ul {
    width: 205px;
    padding: 0 0 7px 15px;
}
    #accordion > div > ul li {
        background: url(../images/arrow.png) left 9px no-repeat;
        padding: 6px 0 6px 10px; 
        outline: none;
    }
        #accordion > div > ul li a { font: .9em Arial, "Lucida Grande", sans-serif; outline: none; }
        #accordion > div > ul li a:link, #accordion > div > ul li a:visited { color: #7d7d7d; }
        #accordion > div > ul li a:hover, #accordion > div > ul li.ui-state-active a { color: #64d1e7; }
        #accordion > div > ul li.ui-state-active a { text-decoration: underline; }

#accordion > div > div.ui-tabs-panel, #accordion > div > section {
    width: 560px;
    position: absolute;
    top: -23px;
    right: 0;
}
    #accordion > div > div.ui-tabs-panel span.button, #accordion > div > section span.button { float: right; display: inline-block; }
    #accordion > div > div.ui-tabs-panel h4, #accordion > div > section h4 { margin-bottom: 7px; font-size: 1.5em; color: #6a6a6a; }
    #accordion > div > div.ui-tabs-panel h5, #accordion > div > section h5 { margin-bottom: 15px; font-size: .9em; color: #a6a6a6; }
    #accordion > div > div.ui-tabs-panel p, #accordion > div > section p {
        font: 1em Helvetica, Arial, "Lucida Grande", sans-serif;
        color: #757575;
        line-height: 1.5em;
    }

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

Answer 1

绝对位置肯定会毁了你的聚会，所以让我们用一些 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);

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