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

Question

我正在尝试绝对定位一个文本区域，该文本区域将拉伸(stretch)以覆盖其父级。 不幸的是，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 and 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 呈现为替换元素 的浏览器。呈现此控制委托(delegate)给操作系统，而不是由浏览器本身处理，并且在呈现具有 position: absolute 的替换元素时，某些 CSS 属性似乎没有得到遵守。 CSS 规范的相关(且复杂)部分是 https://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width