CSS如何将聊天框对齐到屏幕底部

Question

我有几个聊天框和其他div元素需要定位在屏幕底部，右对齐。

问题1：元素高度不相同，较小的元素与最高元素的顶部垂直对齐。示例：http://jsfiddle.net/sd69jdxp/

#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; float: right; position: relative; margin: 0 5px; }

问题 #2: 使用以下代码对div元素进行底部对齐的方式：

display: inline-block; vertical-align: bottom;

此时，第一个（最小的）聊天框上方的链接（锚点）无法点击，因为父容器覆盖了链接。而且不可能将聊天容器的z-index设置低于其后面的内容，因为聊天框是聊天容器的子元素，必须比页面内容的z-index高。如何解决这个问题？ 示例演示： http://jsfiddle.net/xw689yv8/

总结 我该如何强制所有的div元素与屏幕右下角对齐，而不会使聊天框（聊天框的父级div）遮盖聊天框后面的内容，从而导致内容无法点击？

- Adam Strudwick

Answer 1

• 在容器上使用pointer-events: none，其下方的元素现在可以被点击。

• 使用display: inline-block和vertical-align: bottom将聊天框排列在固定容器内。

• 聊天框获得了pointer-events: auto，因此它们及其子元素可以被点击。

对于IE10及以下版本，请查看这个旧问题的答案来转移点击事件。

示例

请在全屏模式下查看，并选择隐藏容器下方的文本输入框。

.under {
  position: absolute;
  bottom: 200px;
  right: 200px;
}
#container {
  position: fixed;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.chat {
  border: 1px solid #999;
  display: inline-block;
  vertical-align: bottom;
  position: relative;
  margin: 0 5px;
  pointer-events: auto;
}
.title {
  padding: 0.5em;
  background-color: blue;
  color: white;
}
.text {
  padding: 10px;
}

<div class="under">
  <input type="text" value="select me!" />
</div>

<div id="container">
  <div class="chat">
    <div class="title">This is the chat title</div>
    <div class="text">
      <p>Text 1</p>
      <p>Text 2</p>
      <p>Text 3</p>
    </div>
    <div class="chatbox">
      <input type="text" />
    </div>
  </div>
  <div class="chat">
    <div class="title">This is the chat title</div>
    <div class="text" style="height:250px">
      <p>Text 1</p>
      <p>Text 2</p>
      <p>Text 3</p>
    </div>
    <div class="chatbox">
      <input type="text" />
    </div>
  </div>
</div>

- misterManSam

---

非常优雅的解决方案。以前从未听说过pointer-events属性。感谢您清晰快速的回复！ - Adam Strudwick

@AdamStrudwick - 不用担心，指针事件仅支持IE11 +。这是个问题吗？ - misterManSam

完全不支持IE10及以下版本，因为只有少数客户在使用。 - Adam Strudwick

Answer 2

我不确定您想如何对齐它们，所以我将它们放在彼此上方。

http://jsfiddle.net/ouu94tfv/

#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; right:0; position: absolute; bottom: 0; margin: 0 5px; display:inline-block; float:right;}
.title { padding: 0.5em; background-color: blue; color: white; }
.text { padding: 10px; }

- Slava Knyazev