css - 如何为 SPA 应用程序制作响应式和可滚动的主面板？

Question

我正在开发一个 SPA 应用程序，它也将采用响应式设计。

计划是有一个固定高度的页眉 (30px)，然后是填充的内容，以及一个固定高度的页脚 (20px)。就像 winforms 中的 TableLayoutPanel (Absolute:30,Percent:100%,Absoulte:20)。

由于视口(viewport)的大小，内容区域填满了整个可用空间，不会导致溢出以显示浏览器的滚动条。相反，内容区域有一个内部滚动条。所有内容都将加载到该区域，因此在需要时它会显示滚动条。

当我搜索并与 SO friend 交流时，我得到了这个解决方案:

<div class="shell">

<header class="shell-header">Header Info</header>

<div class="main-row">
    <div class="main-scroll">
        <section class="main"
            data-bind="router: { transition: 'entrance', cacheViews: true }">
        </section>
    </div>
</div>

<footer class="shell-footer">Footer Info</footer>

这是样式:

.shell {
    height: 100%;
    display: table;
    width: 100%;
}

.shell-header {
    width: 100%;
    display: table-row;
    height: 30px;
}

.shell-footer {
    width: 100%;
    display: table-row;
    height: 20px;
}

.main-row {
    display: table-row;
    height: 100%;
    width: 100%;
}

.main-scroll {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #F5F5F5;
    display: block;
    height: 100%;
    margin: auto;
    max-width: 1100px;
    position: relative;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.main {
    height: 100%;
    background-color: whitesmoke;
    max-width: 1100px;
    width: 100%;
    position: absolute;
    display: block;
}

此解决方案在 Firefox 和 Chrome 上运行良好，并且在调整大小后一切正常。但是在 IE 10 中，div class="main-scroll" 没有填充它的父元素，它的高度在布局中是 0px。

问题 1:为什么会这样？

问题 2:IE10 的解决方法是什么？

Answer 1

您的 HTML 和 BODY 标签是否设置为 height:100%？因为百分比是基于父元素，而不是视口(viewport)。话虽如此，我建议使用以下代码。

HTML(内部 HTML 正文标记):

<header>
     Fixed header here
</header>
<section>
    <p>Text here</p>
</section>
<footer>Fixed footer</footer>

CSS:

html {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
body {
    width:100%;
    position:relative;
    height:100%;
    margin:0;
    padding:0;
}
header {
    height:30px;
    position:absolute;
    top:0;
    width:100%;
    text-align:center;
    color:white;
    background-color:black;
}
section {
    padding: 30px 20px; /* first number needs to be higher then height header/footer */ 
    box-sizing:border-box;
    height:100%;
    overflow-y:scroll;
}
footer {
    position:absolute;
    z-index:1;
    width:100%;
    height:30px;
    bottom:0;
    text-align:center;
    color:white;
    background-color:black;
}

不幸的是，我无法在 Internet Explorer 上测试它，因为我是 Mac 用户。这是 JS fiddle 的链接:http://jsfiddle.net/Ykt98/2/另请记住，HTML5 标签需要在某些 (IE) 浏览器中通过 Javascript 进行“伪造”。

<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->