底部：0 在固定定位的 Firefox 中不起作用答案

【问题标题】：bottom: 0 doesn't work in Firefox with fixed positioning底部：0 在固定定位的 Firefox 中不起作用
【发布时间】：2016-04-23 14:31:20
【问题描述】：

我有一个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 方法来解决这个问题？我真的很想让它在没有任何 Javascript 的情况下让它看起来和运行起来就像在 Chrome 中一样。

【问题讨论】：

用更好的解释和可能派上用场的第二个示例更新了我的答案

标签： css firefox

【解决方案1】：

作为MDN

当top 和bottom 都被指定，而height 未指定或 auto 或 100%，top 和 bottom 距离都受到尊重。在所有其他情况下，如果 height 受到任何限制，top 属性优先，bottom 属性被忽略。

所以我建议这样做，只需删除 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;
}

&lt;textarea placeholder="write..."&gt;&lt;/textarea&gt;

【讨论】：

我可以离开top: 3em，并在height: calc(...)之前添加height: auto作为后备，但这个想法奏效了。谢谢！当然，我仍然不确定 height 在我的情况下是如何受到限制的，或者哪种行为是“正确的”行为（看起来像 Chrome 的那样）。 ¯\_(ツ)_/¯
FWIW，HTML5 规范说对于 textarea 元素："Visual user agents should set the height of the control to the number of lines given by character height." 其中字符高度取自 textarea 的 rows 属性，并且在未明确指定时采用默认值。这就是 Firefox 正在做的事情。所以高度是有限制的。但请注意，这是“应该”，而不是“必须”，因此 Chrome 的行为也是允许的。

【解决方案2】：

~~不知道为什么 FF 行为不端所以这里有一个使用CSS calc()的解决方法~~

Firefox 似乎遵循this rendering rule 并且这样做实际上为textarea 元素预设了高度（和宽度）。正是这个预设覆盖了top-bottom/left-right 设置，因此受到约束，导致应用约束规则（top-bottom/left-right）。

为了使所有浏览器的行为都相同，需要明确设置高度和宽度，我使用CSS calc() 来获得正确的高度。

（右下属性不再影响渲染结果，可以去掉）

html, body {
  margin: 0;
  height: 100%;
}
textarea {
  position: fixed;
  top: 3em;
  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;
  resize: none;
}

<textarea>
write more...
</textarea>

在某些情况下，使用定位时需要top-bottom/left-right 属性，因此对于textarea，可以使用这样的包装器

html, body {
  margin: 0;
  height: 100%;
}
div {
  position: fixed;
  top: 3em;
  left: 0;
  right: 0;
  bottom: 0;
}
textarea {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #222;
  color: #fff;
  display: block;
  font-size: 1.2em;
  letter-spacing: 0.6px;
  resize: none;
}

<div>
  <textarea>
    write more...
  </textarea>
</div>

【讨论】：

【解决方案3】：

这个 css 似乎可以工作 [https://jsfiddle.net/ubc4nz9k/]https://jsfiddle.net/ubc4nz9k/ 根据您的需要设置 padding-top

#pad textarea {
width: 100%;
height:100%;
box-sizing: border-box;

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

#pad { 
padding-top: 20px;
position: fixed;
width:100%;
height:100%;
left:0;
right:0;
}

【讨论】：