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行（取消索引文件中的其他html代码）并使用shell.html文件，然后布局中断。

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

没有Durandal

使用Durandal

Answer 1

当我在标题，内容，页脚周围放置一个包装器div并将其设置为高度：100％;然后它也可以与durandal。 ：）

#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

问题可能是MS网格布局干扰了Twitter Bootstrap。您是否尝试过将CSS包含在Bootstrap中？

Answer 3

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

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

我的shell看起来像这样：

<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演示文稿。