textareaの幅を親の100%に拡大するには?
私は幅100%を試してみましたが、それはどのようなクラッシュレイアウトページの100%に展開され、動作しません。
ここでは、視覚的な方法で質問。
ヒントをください。
。
<div> <div style="width:20%; float:left;"> <p>Some Contentsssssssssss</p> </div> <div style="float:left;width:80%;"> <textarea style="width:100%;">
「textarea」を含むdivの「width」を定義する必要があります。「textarea」を宣言すると、「。main> textarea`は「width:oritries」を持ちます。
注: 。main> textareaは、 class = "main"を持つ要素内の < textarea>を意味します。
。main> textarea
class = "main"
< textarea>
これが[作業ソリューション][1]です。
HTML:。
<div class="wrapper"> <div class="left">left</div> <div class="main"> <textarea name="" cols="" rows="">
ボックスモデルは、すべてのWeb開発者が知っておくべきことです。 サイズのパーセントとパディング/マージンのピクセルを操作しても機能しません。 見栄えの悪い解決策は常にあります(例:. 幅が90%で、パディング/マージンが10px未満のパッド/マージンをdivで与える)。
これを確認してください(micro.praviのコードを使用):http://jsbin.com/umeduh/2。
<div id="container"> <div class="left"> <div class="content"> left </div> </div> <div class="right"> <div class="content"> right <textarea>Check me out! `があるので、フロートをねじ込むことなくパディングとマージンを使用できます。 これはCSSの最も重要な部分です。
textarea { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
HTML:
<div id="left"></div> <div id="content"> <textarea cols="2" rows="10" id="rules">
私ならこうする:
<div class="wrapper"> <div class="side">sidebar here</div> <div class="main"> <textarea class="taclass">
CSS:
.wrapper{ display: block; width: 100%; overflow: hidden; } .side{ float:left; width:20%; } .main{ float:right; width:80%; } .taclass{ display:block; width:100%; padding:2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
これを試してみてください。
textarea { width:100%; }
cssを追加する
textarea { border:1px solid #999999 width:99%; margin:5px 0; padding:1%; }
。
「textarea」を含むdivの「width」を定義する必要があります。「textarea」を宣言すると、「。main> textarea`は「width:oritries」を持ちます。
注:
。main> textarea
は、class = "main"
を持つ要素内の< textarea>
を意味します。これが[作業ソリューション][1]です。
HTML:。
ボックスモデルは、すべてのWeb開発者が知っておくべきことです。 サイズのパーセントとパディング/マージンのピクセルを操作しても機能しません。 見栄えの悪い解決策は常にあります(例:. 幅が90%で、パディング/マージンが10px未満のパッド/マージンをdivで与える)。
これを確認してください(micro.praviのコードを使用):http://jsbin.com/umeduh/2。
textarea { display: block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
HTML:
私ならこうする:
HTML:
CSS:
これを試してみてください。
cssを追加する