Question

我尝试创建一个垂直展开的textarea来填充div中的所有空白区域，除了从上方偏移的固定高度和从下方偏移的固定高度。以下CSS为Chrome提供了技巧，但不是Firefox。在Firefox中textarea看起来像默认高度，只是保持那么大，在下面留下额外的空白空间。有关在所有浏览器中使用Chrome行为的建议吗？

#add-comment-text
{
    position: absolute;
    left: 5px;
    top: 50px;
    bottom: 50px;
    width: 99%;
}

https://jsfiddle.net/2to0upmz/1/

Answer 1

您可以使用css calc function：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

#add-comment-pane
{
  height: 100%;
}

#add-comment-header
{
  position: absolute;
  top: 10px;
  left: 10px;
}

#add-comment-text
{
  position: absolute;
  left: 5px;
  top: 50px;
  bottom: 50px;
  width: 99%;
  height: calc(100% - 100px); <!-- HERE -->
}

#add-comment-button
{
  position: absolute;
  bottom: 10px;
  right: 10px;
}

<div id="add-comment-pane">
    <div class="unselectable" id="add-comment-header">
        Comment on:
        <a href="https://daringfireball.net/projects/markdown/syntax" style="text-decoration: none" target="_blank">markdown</a>.
    </div>
    <textarea id="add-comment-text"></textarea>
    <button class="pure-button pure-button-primary" id="add-comment-button">Post Comment</button>
</div>

Answer 2

将height添加到textarea：

#add-comment-text {
  position: absolute;
  left: 5px;
  top: 50px;
  bottom: 50px;
  width: 99%;
  height:85%;
}

文字区域扩展以垂直填充：适用于Chrome但不适用于Firefox

2 个答案: