Question

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

目前，我有一个简单的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>',

请注意类= “bookingDojo” 在小部件中：

** Q2：如果我从CSS中删除#bookingDojo或.bookingDojo，则应用程序无法正常呈现。

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

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

万分感谢，

Merc的。

Answer 1

对于Q1，文档说：

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

在CSS中，您将appContainer设置为全屏，因为100％的高度表示100％的父元素...并且您的结构是

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

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

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

对于Q3，嗯，我认为这里的整个问题是了解嵌套框如何获得它们的大小，所以你可以参考Q1和Q2 ......

我希望这会有所帮助......

Dojo和小部件的高度

1 个答案: