嵌套在其他 ContentPane 中时，ContentPane 不滚动答案

【问题标题】：ContentPane doesn't scroll when nested inside other ContentPanes嵌套在其他 ContentPane 中时，ContentPane 不滚动
【发布时间】：2014-10-02 21:28:52
【问题描述】：

我正在使用一个包含 TabContainer 的 Dojo Dialog，该 TabContainer 有一个 ContentPane，其中包含图像和带有文本的嵌套 ContentPane。我希望嵌套的 ContentPane 滚动，但我不希望其带有图像的父容器滚动。

<div data-dojo-type="dijit/Dialog" data-dojo-id="dialogWelcome" data-dojo-props="title: 'About'" style="width: 650px; align-content: center;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
        <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {width: '100%', height: '600px'}">
            <div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction', style:  {overflow: 'hidden'}">
                <img id="projectImage" src="../images/island.png" />
                <div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0}">
                    about this project
                </div>
            </div>

“divDialogMessage”的内容是动态添加的。这给了我以下对话框

如果我将 divContainer 的样式更改为

                <div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction', style:  {overflow: 'auto'}">

然后我得到了我不想要的东西，它的父 ContentPane 具有图像和文本滚动。

仅让文本 ContentPane 滚动的正确语法是什么？

【问题讨论】：

标签： html dojo scroll contentpane

【解决方案1】：

您还需要通过 CSS 明确地为您的内部 ContentPane 指定一个高度，否则没有什么限制它首先需要处理溢出。

对您的代码进行最少修改的示例：

<div data-dojo-type="dijit/Dialog" data-dojo-id="dialogWelcome" data-dojo-props="title: 'About'" style="width: 650px; align-content: center;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
        <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {width: '100%', height: '600px'}">
            <div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction'">
                <img id="projectImage" src="../images/island.png" />
                <div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0, height: '500px'}">
                    about this project
                </div>
            </div>
        </div>
    </div>
</div>

无关的：

避免使用data-dojo-id，因为它会创建全局变量。分配一个id，然后在必要时使用dijit/registry.byId 检索小部件。
尽可能选择实际样式表而不是内联样式。

【讨论】：

【解决方案2】：

您需要将 ContentPane 的高度设置为您希望文本占据的大小。

<div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0, height: '150px'}">
 lots of text goes here to make overflow...
</div>

这是一个工作示例：http://jsfiddle.net/kagant15/0s21v90g/

【讨论】：