位置覆盖有时多行div？

我想在div上放置覆盖图。当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>

enter image description here

是否有可能获得这些数据？

来源

2012-03-29 Sean Anderson

我把你的代码放入this fiddle，用工作代码改变了一部分错误（JSLint报告的）并将其放入.ready（）中，以便它被调用。

从这里看，是否有帮助。我没有直接回答什么，但更确切的问题，将有助于明确您的问题！（：

来源

2012-03-29 16:48:24 lzdt

嘿。迫使我使用jsFiddle使问题变得更容易。事实证明，我没有在创建我的覆盖之前调用我的jQuery UI滑块初始化。 – 2012-03-29 17:42:15

良好的调试或问题 - 承担你可以解释你的promblems解决它的大部分，很高兴我可以帮助。 – lzdt 2012-03-29 20:32:30

你并不需要在所有的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/

来源

2012-03-29 17:44:46

位置覆盖有时多行div？

回答

相关问题