Html 将div固定在底部，并保持其响应性

我相信这个案例以前已经得到了回答，但是我没有发现任何有用的方法来解决这个问题

我正在尝试将聊天框

div

设置到页面底部，我需要将其放置但不固定，并且我还需要尽可能保持页面的响应性

如您所见，聊天框浮动在右侧的左侧

div

-我希望在它们之间留出一个空间，使聊天打开，而不是关闭

下面是一些图片，有更明确的解释

以下是我希望实现的目标：

当聊天窗口打开时，我希望实现以下目标：

以下是我目前的状态：

---

正是因为这个

css

.faq_cont_left {
    background-color: gray;
    float: left;
    width: 33.3333333%;
    height: 800px;
}

在上面的css中，您给出的高度

800px

比下面的块css高4倍

.faq_cont_right {
    float: right;
    padding: 0;
    width: 66.66666667%;
    height: 200px;
    background-color: blue;
}

在这个css中，您将给出200px。所以你可以这样做

• 您可以将

  .faq\u cont\u left

  的高度降低到

  200px

• 或者您可以将

  .faq\u cont\u right

  的高度增加到

  800px

---

希望这能帮助你

我想这就是你要找的答案，请检查一下，这是

Fork

或你的代码

我刚刚给你的

.faq\u聊天

课增加了一些额外的风格

.faq_chat{
    padding: 30px 30px 30px 30px;
    width: 66.66666667%;
    background-color: #d2f1f0 ;
    z-index: 99;
    position: fixed;//my style
    right: 0;//my style
    bottom: 0;//my style
}

---

您可以使用flex查看您所拥有的

弹性指南：

html，正文{
最小高度：100%；
身高：100%；
}
身体{
显示器：flex；
弯曲方向：立柱；
利润率：6px；
背景：红色；
}
.my app{/**或者如果需要，只需在应用程序容器中使用“body”**/
身高：100%；
显示器：flex；
弯曲方向：立柱；
背景:#f5；
}
.标题{
背景：浅绿色；
高度：80px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：#fff；
}
.一些内容{
背景：番茄；
填充：20px0；
利润率：10px0；
颜色：#fff；
}
.聊天{
背景：浅蓝色；
保证金：自动0 5px 0；
填充：10px；
}

我的应用程序名称
一些内容。。。
我美丽的聊天

这是由于位置原因造成的。您需要在底部设置div的固定位置

位置：固定

---

这里我更新了你的密码，请检查一下

我们可以使用

position:fixed

在底部创建div吗。即使是固定的，它也可以响应。谢谢…我试过了…它使div浮动…上升-小提琴在柱子上-这里的位置：绝对位置：绝对位置我必须设置为左放置它…所以我必须放置准确的大小，所以它不响应你可以使用%或vw来实现这一点，这是我在这种情况下唯一能想到的——非常感谢！

.faq_chat{
    padding: 30px 30px 30px 30px;
    width: 66.66666667%;
    background-color: #d2f1f0 ;
    z-index: 99;
    position: fixed;//my style
    right: 0;//my style
    bottom: 0;//my style
}