我试图绝对定位一个文本区域,它将延伸到覆盖它的父级.
不幸的是,Chrome似乎忽略了正确的属性,Firefox忽略了右侧和底部属性.
不幸的是,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/
演示: 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