Question

我正在尝试绝对定位一个文本区域，该区域将覆盖它的父母。不幸的是，Chrome似乎忽略了正确属性，Firefox忽略了正确和底部属性。

这是我正在使用的CSS：

＆＃13;

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

＆＃13;

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

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

Answer 1

将textarea包装在一个元素中，并在该元素上使用相同的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

Answer 2

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

这是正常工作的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>

绝对定位文本区域不尊重右侧和底部属性

2 个答案: