我以为我们已经基本解决了这类问题,但我发现 Firefox 和 IE 与 Chrome 的显示方式存在不一致(想必所有 CSS 半神都知道)。
在这里看看这个 jsfiddle:http://jsfiddle.net/smithkl42/jmgEV/1/
div.parent{
position:relative;
height:200px;
width:400px;
background-color:blue;
}
textarea.child{
position:absolute;
height:30px;
bottom:2px;
left:2px;
right:2px;
}
在 Chrome 中它做我想做的,即显示 <textarea>
在其父 div 的底部,并且与父 div 一样宽。但在 FireFox 和 IE 中,它会忽略 right:2px
线,并只给它默认的宽度。
如果我替换 <textarea>
用<div>
(参见 here ,它的行为符合我的要求。
知道为什么吗?
编辑: 感谢所有的建议。我应该注意到父元素(在现实世界中,而不是在我的 fiddle 中)会改变大小,所以我不能使用任何“只需手动设置宽度”的建议。例如,无论其父元素是 1200 像素宽还是 50 像素宽,我都需要它距离左右边缘 正好 两个像素。因此,将它设置为 % 之类的东西,如果是主要是固定宽度,在这里不起作用。有关其他评论,请参见下文。
最佳答案
始终将宽度定义为replaced带有 position:absolute
的元素. <textarea>
是一个被替换的元素。像这样写:
HTML
<div class="parent">
<div class="child">
<textarea></textarea>
</div>
</div>
CSS
.parent{
position:relative;
height:200px;
width:400px;
background-color:blue;
}
.child{
position:absolute;
bottom:2px;
left:2px;
right:2px;
}
.child textarea{
width:100%;
height:30px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
关于css - 将 textarea 置于 div 底部并填充至(宽度 - 2px 边距),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14453370/