durandal - Durandaljs 2.0 覆盖了我的 CSS 布局设置

Question

查看两张图片，您会发现使用 durandal 时布局无法正常工作。

我正在为 Internet Explorer 10+ 使用 Microsoft CSS 网格布局

我在这里使用 Visual Studio 2012 上传了一个示例项目：

http://speedy.sh/2QDQY/TLP2014.7z

在这个项目中，只需转到 Views\Home\Index 文件并注释禁用 durandaljs 的前 2 行，然后布局就可以了。

或者启用这些前 2 行（注释索引文件中的其他 html 代码）并使用 shell.html 文件，然后布局被破坏。

这是我的错误还是我做错了什么？

没有杜兰达尔

与杜兰达尔

Answer 1

当我在页眉、内容、页脚周围放置一个包装器 div 并将其设置为 height:100%; 那么它也可以与杜兰达尔一起使用。:)

#siteWrapper {
  height:100%;    
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 60px 1fr 60px; // header content footer
}

昨天为时已晚...修复也是为具有 applicationHost id 的 div 制作 100% 的高度！这是... durandal 的根源 ;-)

Answer 2

我通过向我的网站添加 fx_height.css 解决了这个问题：

/*durandal fixes*/
#applicationHost, #applicationHost > div, #applicationHost > div > div
{
    height: 100%; 
}

我的外壳看起来像这样：

<div id="shell">
    <!-- ko compose: {view: 'nav'} --><!--/ko-->
    <div id="wrap">
        <!-- ko compose: {
        model: router.activeItem, 
        afterCompose: router.afterCompose,
        transition: 'entrance'} -->
        <!--/ko-->
    </div>
    <!-- ko compose: {view: 'footer'} --><!--/ko-->
</div>

我正在使用 Bootstrap 3 Sticky 页脚结构及其sticky-footer.css 演示文稿。

Answer 3

问题可能是 MS 网格布局干扰了 Twitter Bootstrap。您是否尝试过为 Bootstrap 注释掉 CSS 包含的内容？