Question

我正在研究SPA应用程序，它也将具有响应式设计。

计划是使用固定高度标题（30px），然后是填充内容和固定高度页脚（20px）。就像winform中的TableLayoutPanel（绝对：30％，百分比：100％，绝对：20）一样。

由于视口的大小，内容区域填充了整个可用空间，并且不会导致溢出以显示浏览器的滚动条。相反，内容区域具有内部滚动条。所有内容都将在此区域加载，因此如果需要，它将显示滚动条。

enter image description here

当我搜索并与SO朋友交流时，我来到了这个解决方案：

<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标记是否设置为高度：100％？因为百分比基于父元素，而不是视口。话虽如此，我建议使用以下代码。

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;
}

不幸的是，由于我是Mac用户，我无法在Internet Explorer上测试它。这是一个与JS小提琴的链接：http://jsfiddle.net/Ykt98/2/ 另外请记住，HTML5标签需要通过Javascript在某些（IE）浏览器中“伪造”。

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

Answer 2

我在谷歌搜索中遇到了这个问题，以为我会添加另一个使用更现代技术的答案。

*, ::before, ::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}
section {
    overflow-y: scroll;
    flex-grow: 1;
}
header, footer {
    text-align: center;
    color: white;
    background-color: black;
}

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

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

2 个答案: