Javascript 如何在Sencha中创建页脚，除非内容溢出页面，否则页脚将被固定？

我正在使用Phonegap和Sencha（不是我的选择）创建一个本地应用程序。我有一些页面的内容非常少，我希望我的页脚在底部。因此，我只需将页脚底部固定。但是，在内容溢出视口的其他页面上，我不希望页脚笨拙地停靠在现在已经运行过的内容顶部。在这种情况下，当内容溢出视口时，我希望页脚位于页面流中，并与页面对齐。只需将页脚移动到页面流中，即可轻松解决此问题。因此，理论上，我可以简单地将页脚配置为停靠在每个页面的页面流中。但是，这对于应用程序中的页面来说是不合理和不现实的，这些页面通过DB动态生成内容，创建包含一个项目的页面，而其他页面包含数百个项目

那么，我如何创建一些查看页面的功能，将页面上的内容与视口进行比较，然后自动将页脚设置为停靠在小页面的底部，或者在较长页面的页面流中

---

好的，这部分取决于您使用的组件以及影响它们的布局。。但经过几分钟的胡闹之后，我想到了这个

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',
    requires: [
        'Ext.TitleBar'
    ],
    config: {

        items: [{
            docked: 'top',
            xtype: 'titlebar',
            title: 'Titebar'
        }, {
            xtype: 'container',

            // represents a page
            // the height of this container is set to 100%
            //
            height: '100%',
            scrollable: true,
            items: [{
                // extra long content
                // html: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",

                // shorter content
                html: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",

                // min height of container is 100% of viewport height (vh)
                // then subtract the height of the footer.
                //
                style: 'min-height: calc(100vh - 95px);'

            }, {

                // if toolbar is the same across multiple pages
                // you can create a new class of this toolbar and
                // reference it by xtype: 'myreusablefooter'
                //
                xtype: 'toolbar',
                items: [{
                    text: 'footer items...'
                }]
            }]
        }]
    }
});

你可以在这里玩

你可以在这里看到代码

---

您能提供一些HTML/CSS，让我们看看您的尝试吗？