textareaの幅を親の100%に拡大するには?
私は幅100%を試してみましたが、それはどのようなクラッシュレイアウトページの100%に展開され、動作しません。
ここでは、視覚的な方法で質問。
ヒントをください。
<。!-スニペットを開始:js hide:false -->。
<div>
<div style="width:20%; float:left;">
<p>Some Contentsssssssssss</p>
</div>
<div style="float:left;width:80%;">
<textarea style="width:100%;"></textarea>
</div>
<div style="clear:both;"></div>
</div>
<。!-終了スニペット-->。 <。!-終了スニペット-->。
「textarea」を含むdivの「width」を定義する必要があります。「textarea」を宣言すると、「。main> textarea`は「width:oritries」を持ちます。
注: 。main> textarea
は、 class = "main"
を持つ要素内の < textarea>
を意味します。
これが[作業ソリューション][1]です。
HTML:。
<div class="wrapper">
<div class="left">left</div>
<div class="main">
<textarea name="" cols="" rows=""></textarea>
</div>
</div>
CSS:。
.wrapper {
display: table;
width: 100%;
}
.left {
width: 20%;
background: #cccccc;
display: table-cell;
}
.main {
width: 80%;
background: gray;
display: inline;
}
.main > textarea {
width: inherit;
}
ボックスモデルは、すべての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!</textarea>
</div>
</div>
</div>
< div class = "content">
があるので、フロートをねじ込むことなくパディングとマージンを使用できます。
これは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"></textarea>
</div>
CSS:
body{
width:100%;
border:1px solid black;
border-radius:5px;
}
#left{
width:20%;
height:400px;
float:left;
border: 1px solid black;
display:block;
}
#content{
width:78%;
height:400px;
float:left;
border:1px solid black;
text-align:center;
}
textarea
{
margin-top:100px;
width:98%;
}
デモ: [HERE][1]。
私ならこうする:
HTML:
<div class="wrapper">
<div class="side">sidebar here</div>
<div class="main">
<textarea class="taclass"></textarea>
</div>
</div><!--/ wrapper -->
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;
}