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>

enter image description here

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

Answer 1

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

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

Answer 2

您根本不需要JavaScript！

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

你要做的是在你的CSS中添加这些代码行并删除display: none;。

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

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

以下是一个示例：http://jsfiddle.net/uJrLT/21/

位置覆盖有时多行div？

2 个答案: