修复股利底部，并保持它的响应

Question

我敢肯定，这起案件之前已经回答了 - 但我没有找到什么有用的东西，可以解决这个问题...

我正在尝试设置聊天框div到页面的底部，我需要它被放置，但不是固定的，我也需要保持页面尽可能多的响应。

正如你可以看到Here，聊天框浮动权div左 - 我希望有它们之间的空间，让聊天开辟了而不是下降...

这里有一些图片更明确的解释

这是我想达到的目的：

这是我想达到的目的，当聊天窗口打开：

这是我目前的状态：

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

正是因为这个css

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

在你给高度800px以上的CSS发生哪些t是4倍韩下面的块css

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

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

• 可以减少.faq_cont_left高度200px
• ，也可以增加.faq_cont_right高度800px

希望这将有助于你

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请检查一下。