上一篇: css – flex项目的`display`属性... 下一篇:css – Flex-flow：列包装.如何设...

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

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 绝对定位的文本区域不尊重右侧和底部属性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我试图绝对定位一个文本区域,它将延伸到覆盖它的父级.
不幸的是,Chrome似乎忽略了正确的属性,Firefox忽略了右侧和底部属性.

这是我正在使用的CSS：

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

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

是否有textarea默认属性,我必须禁用或这些只是错误？
有一些变通方法可以通过从父级继承这些属性来实现父级的完整宽度和高度,但我正在寻找一种方法来为将来的方案做出绝对定位,而不仅仅是自定义右侧和底部.

解决方法

将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