Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

textarea的宽度不占页面的100％的全宽。请问有什么不对？

Answer 1

更新以下css：

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

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

将textarea和表单放在div的底部会扭曲textarea的宽度

1 个答案: