javascript - 位置覆盖有时多行 div？

Question

我正在尝试在 div 上放置一个叠加层。当 div 保证只有一行时，我的代码成功运行，但我正在努力获得 div 爆发时的正确高度。看起来 div 报告其单行高度，但在渲染后显示多行高度。

function InitializeControls() {
    console.log("Width: " + $('#PlanViewControls').width());
    console.log("Height: " + $('#PlanViewControls').height());

    console.log("innerHeight: " + $('#PlanViewControls').innerHeight());
    console.log("outerHeight: " + $('#PlanViewControls').outerHeight());

    $('#PlanViewControls').show();

    $('#PlanViewControlsOverlay')
        .stop()
        .show()
        .css({ opacity: .7 })
        .width($('#PlanViewControls').width())
        .height($('#PlanViewControls').height())
        .offset($('#PlanViewControls').offset())
}

#PlanViewControlsOverlay
{
    background: white;
    opacity: 0.7;
    filter: alpha(opacity=70);
    position: absolute;
    z-index: 10001;
}

#PlanViewControls
{
    display: none;
    min-height: 20px;
    margin-bottom: 5px;
    
    width: 100%;
    min-width: 200px;
    overflow: hidden;
    padding: 5px;
}

#PlanViewControls > div
{
    display: inline-block;
    min-height: 20px;
}

<div id="PlanViewControlsOverlay"> 
</div>

<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
    <div class="separated" style="padding-top: 3px">
        <div id="PlanViewZoomSlider"></div>
    </div>
    <div class="separator">|</div>
    <div class="separated">
        <label>
            Rack Info: 
            <select id="RackInfoSelect">
                <option value="Name">Name</option>
            </select>
        </label>
    </div>
    <div class="separator">|</div>
    <div class="separated" style="padding-top: 4px">
        <label>
            Enable Auto-Refresh:
            <input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
        </label>
    </div>
    <div class="separator">|</div>
    <div class="separated">
        <label>
            Levels To Display:
            <select id="LevelSelect">
                <option value="All">All</option>
            </select>
        </label>
    </div>
    <div class="separator">|</div>
    <div class="separated" style="padding-top: 3px">
        <a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
            <span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
            <label id="ExportLabel">Export</label>
        </a>
    </div>
</div>

是否有可能获得这些指标？

Answer 1

我已将您的代码放入 this fiddle ，用工作代码更改了错误的部分(JSLint 报告的内容)并将其放入 .ready() 以便调用它。

从这里看，是否有帮助。我没有直接回答任何问题，但更精确的问题将有助于确定您的问题(: