css - 底部 : 0 doesn't work in Firefox with fixed positioning

Question

我有一个 simple page我想用一个 textarea 填充整个屏幕，除了顶部的一点。它在 Chrome 中完美运行，但在 Firefox 中不会延伸到窗口底部。这是我正在使用的 CSS:

body#pad textarea {
  position: fixed;
  top: 3em;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;

  background-color: #222;
  color: #fff;
  display: block;
  font-size: 1.2em;
  letter-spacing: 0.6px;
  padding: 1em 2em 2em;
  resize: none;
}

当我添加 height: 100% 时，它确实达到了 100% 的高度，但这不是我想要的，因为它需要在屏幕顶部留出一点空间。有什么纯 CSS 方法可以解决这个问题吗？我真的很想让它的外观和功能与在 Chrome 中一样，而无需任何 Javascript。

Answer 1

作为 MDN

When both top and bottom are specified, and height is unspecified or either auto or 100%, both the top and bottom distances are respected. In all other situations, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.

所以我建议使用这个技巧，只需删除 top: 3em; 并添加 height:calc(100% - 3em);

textarea {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 3em);
  box-sizing: border-box;
  background-color: #222;
  color: #fff;
  display: block;
  font-size: 1.2em;
  letter-spacing: 0.6px;
  padding: 1em 2em 2em;
  resize: none;
}

<textarea placeholder="write..."></textarea>