Javascript 有时将重叠放置在多行div上？

我正在尝试在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>

函数初始化控件（）{
log（“宽度：+$（'#PlanViewControls'）.Width（））；
log（“高度：+$（'#PlanViewControls'）.Height（））；
log（“innerHeight:+$（'#PlanViewControls'）.innerHeight（）；
log（“outerHeight:+$（'#PlanViewControls'）.outerHeight（））；
$（'#PlanViewControls'）.show（）；
$（“#PlanViewControlsOverlay”）
.停止
.show（）
.css（{opacity:.7}）
.width（$（“#平面视图控件”）.width（）
.height（$（“#平面视图控件”）.height（）
.offset（$（“#PlanViewControls”）.offset（）
}
#平面视图控件
{
背景：白色；
不透明度：0.7；
过滤器：α（不透明度=70）；
位置：绝对位置；
z指数：10001；
}
#平面视图控件
{
显示：无；
最小高度：20px；
边缘底部：5px；
宽度：100%；
最小宽度：200px；
溢出：隐藏；
填充物：5px；
}
#平面视图控件>div
{
显示：内联块；
最小高度：20px；
}
|
机架信息：
名称
|
启用自动刷新：
|
要显示的级别：
全部的
|

有可能获得这些指标吗？

我已将您的代码放入，更改了工作代码中有错误的部分（JSLint报告的内容），并将其放入.ready（）中，以便调用它

---

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

您根本不需要JavaScript

只需将#PlanViewControlsOverlay剪切并粘贴到#PlanViewControls分区中即可。这样，您可以使用百分比宽度和高度使其覆盖整个区域

您要做的是将这些代码行添加到css中，并去掉

显示：none；

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

    width: 100%;
    height: 100%;
    display: block;
}

---

下面是一个示例：

Hey。强迫我使用JSFIDLE使问题变得更容易。结果证明，在创建覆盖之前，我没有在jquery UI滑块上调用initialize。良好的调试或问题解决者，您可以解释您的问题，解决了大部分问题，很高兴我能提供帮助。