如何将 dojox.mobile.View 设置为高度 100%答案

【问题标题】：How to set dojox.mobile.View to height 100%如何将 dojox.mobile.View 设置为高度 100%
【发布时间】：2012-08-12 08:40:12
【问题描述】：

是否可以将 dojox.mobile.View 设置为 100% 的高度？

示例：http://jsfiddle.net/sLP4S/6/

使用 dojox.mobile.ScrollableView 代替工作。但我的意图是在视图上添加一个触摸事件，因此视图不需要滚动。

非常感谢。

【问题讨论】：

以编程方式设置高度没问题，但我更喜欢css解决方案：jsfiddle.net/sLP4S/8

标签： javascript mobile dojo dojox.mobile

【解决方案1】：

我玩过 ContentPaneResizeMixin，但最终还是选择了这个。不要指望直接复制和粘贴 - 但这种模式会起作用。在这里，我在标头中的 dojoConfig 中设置了来自服务器的 has 变量。我检测桌面（通过 phpMobileDetect）。

   <script src="/dojo/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad: false, async: 1, isDebug: 1, mblAlwaysHideAddressBar: false, has: { 'isDesktop': <?= json_encode($isDesktop) ?>  }"></script>

然后，我使用条件插件加载器加载不同的基类，并使用一些大小调整逻辑来处理标头。繁荣。桌面本机获取滚动条，iPad 获取 ScrollablePane 工作正常。

define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/has",
    "dojo/has!isDesktop?dojox/mobile/Pane:dojox/mobile/ScrollablePane"
], function(declare, lang, has, Pane) {

    return declare("tt.app.ScrollableAwarePane", [ Pane ], {


        resize: function(){
            this.inherited(arguments);
            if(has('isDesktop')){
                this.containerNode.style.overflowY = "scroll";
                var height = rightPane.offsetHeight - this.getPreviousSibling().domNode.offsetHeight;
                this.containerNode.style.height = height + "px";
            }
        }



    });

});

【讨论】：

【解决方案2】：

我知道这是旧的，但我就是这样做的。我使用了 mbecker 提到的内容并创建了一个扩展常规视图的新视图：：

define([
    "dojo/_base/declare",  
    "dojo/dom",
    "dojo/dom-geometry",
    "dojo/dom-style",
    "dojo/window",
    "dojox/mobile/View",
], function( declare,dom,domGeometry, domStyle, win,View){

    // module:
    //      custom/widget/View2
    console.log("Loading View2");

    return declare("custom.widget.View2", [View], {
        tabName:"outertabbar",

        resize: function(){
        //this is for a fixed tabbar 
            //if you dont have one remove this and the tabbox
            var tabBar = dom.byId(this.tabName);
            var tabBox = domGeometry.getMarginBox(tabBar);

                var winBox = win.getBox();
            var height=winBox.h - tabBox.h + "px";
            domStyle.set(this.domNode, "height",height);
            // summary:
            //      Calls resize() of each child widget.
            this.inherited(arguments); // scrollable#resize() will be called

        }
    });
});

【讨论】：

【解决方案3】：

我在网页设计方面不是很有天赋，但我及时了解到 100% 的高度总是会带来麻烦。相反，我会以像素为单位获取文档高度并从中减去标题、菜单等。然后给出以像素为单位的绝对高度。

【讨论】：