javascript - 不使用 Flexbox 的响应式 div

Question

我目前正在开发一个聊天界面，目前视口(viewport)高度为 100vh，带有页眉/导航栏、“主要内容”部分以及输入字段所在的页脚 - (请参阅 fiddle here )

我当前的编码方式是“主”部分接收通过页脚中的输入字段进行的 AJAX 调用的内容。一旦添加了足够的消息，则只有此部分将变得可滚动，从而使整个页面变得可滚动。

我的问题是如何复制此功能，使其在旧版浏览器中以相同的方式运行，同时仍然保持聊天部分占用页眉和页脚之间的剩余空间而不影响视口(viewport)高度的能力。我的聊天部分的 CSS 使用了 Flexbox，目前看起来像这样:

.chat-section {
    -ms-flex: 1;
    -moz-flex: 1;
    -o-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    background-color: #f8f8f8;
    border-top: 1px solid #A8A8AC;
    border-bottom: 1px solid #A8A8AC;
    overflow-y: scroll;
    overflow-x: hidden;
}

Answer 1

不使用 Flexbox 实现此目的的一种方法是绝对定位。它不太灵活，因为您必须准确指定页脚/页眉的高度，但几乎所有浏览器都支持它:

.chat-section {
/*    -ms-flex: 1;
    -moz-flex: 1;
    -o-flex: 1;
    -webkit-flex: 1;
    flex: 1; */
    background-color: #f8f8f8;
    border-top: 1px solid #A8A8AC;
    border-bottom: 1px solid #A8A8AC;
    overflow-y: scroll;
    overflow-x: hidden;

    position: absolute;
    top: 57px;
    bottom: 100px;
    right:0px;
    left:0px;
}
footer {
    position: absolute;
    bottom: 0px;
}

我在这里 fork 了你的 fiddle :

http://jsfiddle.net/nepwk8of/