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

前端之家收集整理的这篇文章主要介绍了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

猜你在找的CSS相关文章