Internet Explorerのスタイリングを使用したDojo TabContainer

Question

Firefoxでは次のように動作します：

< div style="position:absolute;top:0px;margin-top:60px;bottom:0px;width:100%">
< div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:100%;height:100%">
{% for row in tabContent %}
  < div id="{{row.0}}" dojoType="dijit.layout.ContentPane" title="{{row.1}}">
    {% include row.2 %}
    < /div>
{% endfor %}
< /div>
< /div>

ただし、つまり表示されません。外側のdivでCSSを取り出すと、機能します。

私も試しました

< div style="position:absolute;top:0px;margin-top:60px;bottom:0px;width:100%">
< div style="width:100%;height:100%">
asdf
< /div>
< /div>

そしてそれは正常に動作します。 cssがTabContainerのレンダリングを台無しにする理由を誰もが知っていますか？または、TabContainerがウィンドウのスペースのみを占めるようにするより良い方法があります（2つのスクロールバーを持つことを防ぐために-コンテナ用とブラウザ用に1つ）？ありがとう。

Answer 1

IEのバージョン

次のCSSルールを追加してみてください。 html、body {高さ：100％;幅：100％;マージン：0;パディング：0; }

他にできることは（手に負えないように思えるかもしれませんが）トップレベル要素としてBorderContainerを持ち、region =＆quot; center＆quot;としてTabContainerを持つことです。パート。

<div dojoType="dijit.layout.BorderContainer" style="width:100%;height:100%">
    <div dojoType="dijit.layout.ContentPane region="top" style="height:60px">
        ...
    </div>
    <div dojoType="dijit.layout.TabContainer region="center">
        ...
    </div>
</div>

私はMacのようにIEでこれを試すことはできないが、最近dijitレイアウトの負荷をかけてきたので、このようなことはうまくいくと思います。