0

divに合わせて拡大縮小したいテキストボックスがあります。これはChromeで簡単に実行できました。

HTML：

<div id="div">
<textarea id="textarea"></textarea>
</div>

CSS：

#div {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:4em;
}
#textarea {
    position:absolute;
    top:.2em;
    bottom:.2em;
    left:.2em;
    right:.2em;
    width:auto;
}

これはクロムで非常にうまく機能します。left:一方、Firefoxは、 andright:または両方top:とを使用することを好まないようですbottom:。他の2つよりも優先されているtop:ようleft:で、テキストエリアをクロムのように拡大縮小しません。Firefoxでこれを実現する方法はありますか、それともMozillaがこれを自分で実装するのを待つ必要がありますか？

編集：要求に応じてjsfiddle： http: //jsfiddle.net/Monchoman45/kKxus/

4

1 に答える 1

2

これを試してください-デモ

#div {
    background: beige;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:4em;
    padding: .2em;
}

#textarea {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    height: 100%;
}
于 2012-09-27T20:02:59.930 に答える