如果html内容不足以溢出y，请坚持到底

Question

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

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

这是相关的HTML。屏幕底部的文字输入仅为position: fixed，而bottom-margin上的#message_outer_parent位于<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> 以上。

function setup(){
link = text("this is a link", 120, 120);
}

function draw(){
  if (link.mousePressed){
    link(www.example.com); //does the processing link function move to p5?
}

我希望消息输入正上方，即使只有几条消息。我怎么能做到这一点？

Answer 1

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>

1. 使用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>