Question

我目前正在使用聊天界面，目前视口高度为100vh，标题/导航栏，主要内容为＆＃34; section和输入字段所在的页脚 - （参见小提琴here）

我目前编码的方式有＆＃34; main＆＃34; section通过页脚中的输入字段接收来自AJAX调用的内容。一旦添加了足够的消息，只有此部分将变为可滚动，以使整个页面变得可滚动。

我的问题是关于如何复制此功能以使其在较旧的旧版浏览器中以相同的方式运行，同时仍保持让聊天部分占用页眉和页脚之间的剩余空间而不影响视口高度的能力。我的聊天部分的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;
}

我把你的小提琴分到了这里：

http://jsfiddle.net/nepwk8of/

不使用flexbox的响应式div

1 个答案: