使用 CSS 和 JavaScript 使用总客户端宽度答案

【问题标题】：Using the total client width with CSS and JavaScript使用 CSS 和 JavaScript 使用总客户端宽度
【发布时间】：2012-06-11 21:30:52
【问题描述】：

我有一个与 iGoogle 类似的仪表板页面。我需要让页面在可用的客户端宽度上工作。我编写了一个 JavaScript 来获取宽度并将其均匀地分布在 div 中。该脚本为 div 设置 element.style{width: 540px;} 并且在页面加载时运行良好。它的类似于：

window.onload = function SetWidth(){ document.getElementById(dashCell.id).style.width = (Math.round(window.innerWidth / 2)) + 'px';};

现在是痛点。该页面有一个 UpdatePanel 和一个 Timer，它每 5000 毫秒执行一次 PostBack。当页面再次加载并且 element.style 丢失时，这会破坏设计。

我读过关于流体 CSS 的文章，也考虑过使用 min-width 和 max-width CSS 属性。但现在需要的是让它以这种方式工作。我现在需要一个可行的解决方案，但绝对欢迎更好、更正确的方法来实现这一目标。

【问题讨论】：

为什么不用百分比来表示宽度？ jsfiddle.net/saluce/hPK5b
@saluce：在包含 divs 中加载的控件没有大小限制。因此，我对这些 div 使用overflow: visible;，容器 div 具有固定宽度或百分比宽度。但至少最外面的 div 应该有一个固定的宽度，否则页面只会不断增长。我仍然会尝试一下（它有很多变化）并尽快回复你。感谢您的建议。
@saluce：百分比宽度方法没有按预期工作。可能是因为在页面的某些地方使用了一些tables。不过，我认为你的建议是一个有效的答案，也是正确做法的一个要点。谢谢！

标签： javascript asp.net css width

【解决方案1】：

您必须重新运行脚本并在每个 UpdatePanel 上重新修复您的 css 样式

    <script type="text/javascript">     
   function SetWidth(){ 
      document.getElementById(dashCell.id).style.width = (Math.round(window.innerWidth / 2)) + 'px';
    }
    // set the onload call
    window.onload = SetWidth;

    // capture the UpdatePanel javascript events
    var prm = Sys.WebForms.PageRequestManager.getInstance();    
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    function InitializeRequest(sender, args) {      
    }

     // after the updatepanel complet refix the css
    function EndRequest(sender, args) {
         SetWidth();
    }
    </script>

或者将初始化值保存在某处，然后在更新面板刷新后应用它们。

【讨论】：

这正是我需要的方式。非常感谢！但我有个问题。用户可以选择仪表板的 7 种不同布局。这些是UserControls，这里没有UpdatePanel。但我的宽度设置脚本 (SetWidth();) 位于此处。现在，包含这些布局的 aspx 页面具有 UpdatePanel。理想情况下，您建议的脚本应该放在哪里？ apsx 或 ascx
@Horizon 正如你所描述的那样更好地走向全球，在 aspx 上。