html - 将文本区域和表单放置在 div 的底部会扭曲文本区域的宽度

Question

我正在尝试将一个文本区域和一个带有输入类型的表单提交到页面底部。我的挑战是我可以将两者都放在页面底部，但文本区域的宽度会变形。这是我的代码:

.msg_input {
  width: 100%;
  border: 1px solid white;
  border-top: 1px solid #DDDDDD;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
}
.goBottom {
  position: fixed;
  bottom: 0;
}

<div class="goBottom">
  <textarea placeholder="...type here" class="msg_input" rows="4">
  </textarea>

  <form method="post" action="/logout">
    <input class="btn btn-link" type="submit" value="Exit" />
  </form>
</div>

textarea 的宽度没有占据页面的 100% 宽度。请问有什么问题吗？

Answer 1

更新以下 CSS:

.goBottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

这应该起作用的原因:固定位置元素似乎没有占据全宽。因此，这确保了它是。 textarea 占据 goBottom 元素的整个宽度。