Question

我正在开发一个新的网站布局。我想要一个标题位于顶部的布局，中间有内容，页面底部有一个页脚，如果内容很小，或者页脚到达内容的底部。

左边还会有一个侧边栏，它应该填充页眉和页脚之间的空间，如果内容增长，则会增长以填充空间。

这在Google Chrome中运行良好，但在Internet Explorer中，侧面导航只会填充其使用的空间，而不会填充页眉和页脚之间的整个空间。

http://jsfiddle.net/ama4tyz2/embedded/result/是指向JFiddle的链接，可以在Chrome中打开，这样您就可以看到错误和代码。

下面是我的侧栏css容器的代码，因为我认为这是问题所在。看起来Internet Explorer忽略了min-height参数。

nav.sideNav
{
    position: absolute;    
    float: left;
    width: 200px;
    height: auto;

    min-height: -moz-calc(100% - 160px);
    min-height: -webkit-calc(100% - 160px);
    min-height: -khtml-calc(100% - 160px);
    min-height: -o-calc(100% - 160px);
    min-height: -ms-calc(100% - 160px);
    padding-bottom: 80px;
    background-color: purple;
}

感谢您的帮助

Answer 1

你需要添加一个min-height：没有任何前缀。据我所知，IE的新版本不使用-ms -

所以保留你所拥有的东西加上：

min-height: calc(100% - 160px);

当您添加CSS3样式并需要使用不同的浏览器前缀时，您还应该包含通用的非前缀样式。

请看这里的小提琴：http://jsfiddle.net/5jmwd96e/embedded/result/

侧面导航栏填充内容容器

1 个答案: