0

我试图弄清楚在实例化小部件时如何计算“高度”。我不会走很远...

目前，我有一个简单的 HTML 页面，如下所示：

</head>
<body class="claro"><div id="appContainer"></div></body>
</html>

CSS是这样的：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#appContainer {
    height: 100%;
}

当我的应用程序启动时，会发生这种情况（这是一个简化）：

 // Create the "application" object, and places them in the right spot. 
 appContainer = new BorderContainer( {} , 'appContainer');

保持原样，该应用程序具有正确的大小和一切。

** Q1：为什么我需要为html、body和#appContainer指定高度？

然后，我有：

 // Create the new BookingDojo application
 bookingDojo = new BookingDojo( { id: 'bookingDojo', region: 'center'  } );
 appContainer.addChild( bookingDojo );

最后：

 appContainer.startup();

BookingDojo 有这个 CSS：

#bookingDojo {
   height: 100%;
}

.bookingDojo {
  height: 100%;
}

并使用此模板：

templateString: '' + 
    '<div>' + 
    '  <div class="bookingDojo" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: \'headline\'">' + 

    '    <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: \'center\', tabPosition: \'left-h\'">' + 
    '      <div data-dojo-type="hotplate.bd.Settings" data-dojo-props="title: \'Settings\'">Settings</div>' + 
    '      <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="title: \'attempt\', tabPosition: \'top\'" data-dojo-attach-point="settingsTab">' + 
    '        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:\'One\'">ONE</div>' + 
    '        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:\'Two\'">TWO</div>' + 
    '      </div>' + 
    '      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Two\'">Section Two</div>' + 
    '      <div data-dojo-type="hotplate.bd.Dashboard" data-dojo-props="title: \'Dashboard\'">Section One</div>' + 
    '    </div>'+ 
    '  </div>' + 
    '</div>',

请注意小部件中的 class="bookingDojo"：

** Q2：如果我从 CSS 中取出 wither #bookingDojo 或 .bookingDojo，应用程序将无法正确呈现。

我的意思是，我也有一个问题，我无法让仪表板正确渲染，因为它的高度为 0，但这是一个不同的（可能相关的）故事，我为此添加了不同的帖子。

** Q3：有人可以向我解释整个“小部件的高度”问题吗？我知道小部件需要startup()，并且我知道如果您创建一个内部小部件并且它是不可见的，那么它将需要resize()。但这显然不是我需要知道的全部，因为我发现自己一遍又一遍地努力让一个小部件出现（我去尝试 CSS、doLayout、调整大小等）所以......好吧，我一定错过了一些东西！

太感谢了，

默克。

4

1 回答 1

1

对于第一季度，文档说：

外部尺寸必须在 BorderContainer 节点上指定。必须分别为边指定宽度，为顶部和底部指定高度。中心不应指定尺寸；它将填充剩余的空间。

在您的 CSS 中，您将 appContainer 设置为全屏，因为 100% 的高度意味着 100% 的父元素...并且您的结构是

<html><body><div id="appContainer">...etc

因此，如果您希望 appContainer 占据屏幕高度的 100%，则必须将 body 和 html 都设置为 100%...默认情况下，块元素已经是 100% 宽，因此无需在此处设置宽度。 .

对于第二季度，我建议您在 firebug 中查看您的 html。您会注意到一个 id="bookingDojo" 的 div，它将是您模板的最外面的 div。第一个内部 div 有一个 class="bookingDojo"。同样，这 2 个 div 是嵌套的，因此，如果您希望它们填充其父容器 div 的完整高度（即您的 BorderContainer，您已经设置为 100% 高）。我在这里做了一个小例子http://jsfiddle.net/psoares/7JQWC/ 你会看到类似 bookingDojo 的东西，我将 #bookingDojo 设置为 100% 高度，但没有为 .bookingDojo 类指定高度。尝试设置它，您会看到红色边框扩大...

对于第三季度，我认为这里的整个问题是理解嵌套框如何获得它们的大小，因此您可以参考第一季度和第二季度......

我希望这有帮助...

于 2012-12-01T00:52:54.913 回答