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

【问题标题】：How to make a responsive and scrollable main panel for a SPA application?如何为 SPA 应用程序制作响应式和可滚动的主面板？
【发布时间】：2019-08-19 08:29:07
【问题描述】：

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

计划是有一个固定高度的标题（30 像素），然后是填充的内容，和一个固定高度的页脚（20 像素）。就像 winforms 中的 TableLayoutPanel (Absolute:30,Percent:100%,Absoulte:20)。

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

当我搜索并与 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 的解决方法是什么？

【问题讨论】：

尝试将-ms-box-sizing: border-box; 添加到您的.main-scroll
@AdrianEnriquez 不，它没有任何效果。 thie box-sizing 似乎从 IE 8 开始就受到支持，它的 -ms 版本似乎适用于旧版本。
赞成你的问题。

标签： css html internet-explorer single-page-application

【解决方案1】：

您的 HTML 和 BODY 标记是否设置为 height: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 标记需要在某些 (IE) 浏览器中通过 Javascript 进行“伪造”。

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

【讨论】：

你的小提琴很好用。但由于这个问题太老了，我无法在我的真实项目上进行测试。我用边缘测试了你的小提琴，没问题。

【解决方案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>

【讨论】：