绝对定位的文本区域不遵守右侧和底部属性

Question

我正在尝试绝对定位一个文本区域，该文本区域将伸展以覆盖其父项。不幸的是 Chrome 似乎忽略了 right 属性而 Firefox 忽略了 right 和 bottom属性。

这是我正在使用的 CSS :

#container {
  position: relative;
}
#my-text-area {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 10px;
  right: 10px;
}

这是一个 JsFiddle 示例：enter link description here

是否有我必须禁用的 textarea 默认属性或这些只是错误？有一些变通方法可以通过从父级继承这些属性来实现父级的完整宽度和高度，但我正在寻找一种方法来为您将来自定义 right 和 bottom 的场景进行绝对定位不仅0.

Answer 1

将文本区域包裹在一个元素中，并在该元素上使用相同的 css。 演示： https://jsfiddle.net/lotusgodkk/csub6b96/2/

HTML:

<div id="container">
    <div id="my-text-area">

        <textarea></textarea>
    </div>

</div>

CSS:

body,
html,
#container {
    width: 100%;
    height: 100%;
}

body {
    margin: 0px;
}

#container {
    position: relative;
}

#my-text-area {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

textarea {
    height: 100%;
    width: 100%;
}

参考：http://snook.ca/archives/html_and_css/absolute-position-textarea

如果您对为什么需要这样做感兴趣，那是因为受影响的浏览器是那些将textarea呈现为替换元素的浏览器。呈现此控件委托给 OS，而不是由浏览器本身处理，并且在使用 position: absolute 呈现替换元素时似乎不遵守某些 CSS 属性。 CSS 规范的相关（复杂）部分是 https://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width

Answer 2

要从父项获得动态高度和宽度，您可以在 width, height 属性子项中使用 inherit 关键字。

这里正在工作fiddle玩

body,
html,
#container {
  width: 100px;
  height: 100px;
}

body {
  margin: 0px;
}

#container {
  position: relative;
}

#my-text-area {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: inherit;
  height: inherit;
}

<div id="container">
  <textarea id="my-text-area"></textarea>
</div>

绝对定位的文本区域不遵守右侧和底部属性

absolute positioned text area does not respect right and bottom properties

css

textarea