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 方法来解决这个问题？我真的很想在没有任何Javascript的情况下使其外观和功能与Chrome相同。

Answer 1

作为 MDN

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

所以我建议这样做，只需删除top: 3em;并添加height:calc(100% - 3em);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

~~不知道为什么FF行为错误，所以这里是使用CSS calc()~~ 的解决方法

Firefox似乎遵循this rendering rule，这样做实际上具有textarea元素的预设高度（和宽度）。此预设会覆盖top - bottom / left - right设置，因此会受限制导致约束规则（top-bottom / {{3}申请。

要使所有浏览器的行为相同，需要明确设置高度和宽度，我使用left-right来获得正确的高度。

（可以删除右侧和底部属性，因为它们不再影响渲染结果）

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>

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

bottom：0在具有固定定位的Firefox中不起作用

3 个答案: