如果html内容不够溢出y，坚持到底答案

【问题标题】：If html content is not enough to overflow y, stick to bottom如果html内容不够溢出y，坚持到底
【发布时间】：2017-05-19 11:55:35
【问题描述】：

这张图片可能解释得最好。

我有这个聊天功能，目前非常基本。当有足够的文本溢出页面时，它会给出我想要的行为。最近的消息就在底部的消息输入上方。但是，当只有几条消息时，存在的消息在顶部，并且在它和消息输入之间留下了很大的空白。

这里是相关的 HTML。文本输入只是在屏幕底部的position: fixed，在#message_outer_parent 上有一个bottom-margin 将其保持在其上方。

<div id="message_outer_parent">
  <div id="message_content_parent"><div class="message_parent">
    <span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb" "=""></span>
    <span class="message_username">whatever</span>
    <span class="message_message">test text</span>
  </div>
  <div id="message_input_parent">
    <form id="new_message" onsubmit="return submit_new_message()">
      <input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
      <!-- submit button positioned off screen -->
      <input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
    </form>
  </div>
</div>

我希望将消息放在消息输入上方，即使只有几条消息。我怎样才能做到这一点？

【问题讨论】：

Here's something 可以帮助你。
这是一个完美的解决方案。您应该将其发布为答案。

标签： html css layout css-position

【解决方案1】：

Fixed position 在另一个 div 上。

#message_input_parent {
  position: fixed;
  bottom: 5px;
}

#message_outer_parent {
  position: fixed;
  left: 0;
  bottom: 30px;
  max-height: calc(100vh - 30px);
  overflow: auto;
  width: 100vw;
  padding: 5px;
  box-sizing: border-box; /*padding and border won't increase height and width*/
}

<div id="message_outer_parent">
  <div id="message_content_parent"><div class="message_parent">
    <span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb"></span>
    <span class="message_username">whatever</span>
    <span class="message_message">test text</span>
  </div>

  <div id="message_input_parent">
    <form id="new_message" onsubmit="return submit_new_message()">
      <input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
      <!-- submit button positioned off screen -->
      <input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
    </form>
  </div>
</div>

使用flexbox

#message_input_parent {
  position: fixed;
  bottom: 5px;
}

#message_outer_parent {
  height: 100vh;
  width: 100vw;
  padding: 5px 5px 30px 5px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
}

*{margin: 0;}

<div id="message_outer_parent">
  <div id="message_content_parent"><div class="message_parent">
    <span class="message_icon glyphicon glyphicon-user" style="color: #e21bcb"></span>
    <span class="message_username">whatever</span>
    <span class="message_message">test text</span>
  </div>

  <div id="message_input_parent">
    <form id="new_message" onsubmit="return submit_new_message()">
      <input type="text" name="message_input" class="form-control" id="message_input" autocomplete="off" value="" placeholder="">
      <!-- submit button positioned off screen -->
      <input name="submit_message" type="submit" id="submit_message" value="true" style="position: absolute; left: -9999px">
    </form>
  </div>
</div>

【讨论】：