将div修复为底部并保持响应

Question

我确定之前已经回答过此案例 - 但我找不到任何有用的方法可以解决问题......

我试图将聊天框div设置到页面底部，我需要将其放置但不是固定的，我还需要保持页面尽可能多的响应。

正如您所见Here，聊天框浮动在右侧div左侧 - 我希望它们之间有空格，让聊天打开而不是向下... < / p>

以下是一些带有更明确解释的图片

这是我希望实现的目标：

以下是我希望在聊天窗口打开时实现的目标：

这是我目前的状态：

Answer 1

我认为这是您正在寻找的答案，请查看此问题，Fork或您的代码。

我刚为你的.faq_chat课程添加了一些额外的风格。

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

<强> Fiddle

Answer 2

#div{
    position: fixed;
    bottom: 0px;
    width: 80%;
}

Answer 3

这是因为# For more information see the manual pages of crontab(5) and cron(8) # # m h dom mon dow command 30 2 * * 1 /usr/local/sbin/certbot-auto renew >> /var/log/le-renew.log 2>&1

而发生的

css

在上面的css中，你给出的高度.faq_cont_left { background-color: gray; float: left; width: 33.3333333%; height: 800px; } 比块css高4倍

800px

在这个CSS中你给200px。所以你可以这样做

• 您可以将.faq_cont_right { float: right; padding: 0; width: 66.66666667%; height: 200px; background-color: blue; } 的高度降低为.faq_cont_left
• 或者您可以将200px的高度增加到.faq_cont_right

希望这会对你有所帮助

Answer 4

你可以看到flex，除了你以外是什么。

  

Flex指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html, body {
  min-height:100%;
  height:100%;
}

body {
  display:flex;
  flex-direction:column;
  margin:6px;
  background:red;
}

.my-app { /** Or just use "body" for your app container, if you want **/
  height:100%;
  display:flex;
  flex-direction:column;
  background:#f5f5f5;
}

.header {
  background:lightgreen;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.somecontent {
  background:tomato;
  padding:20px 0;
  margin:10px 0;
  color:#fff;
}

.chat {
  background:lightblue;
  margin:auto 0 5px 0;
  padding:10px;
}

<div class="my-app">
  <div class="header">
    My app name
  </div>
  <div class="somecontent">
    Some content...
  </div>
  <div class="chat">
    My beautiful chat
  </div>
</div>

Answer 5

这是因为位置而发生的。您需要在底部设置div的固定位置。

  

位置是：固定

我在这里更新您的fiddle，请检查一下。