textareaの幅を親の幅の100%に拡大する方法(または任意のHTML要素を親の幅の100%に拡大する方法)は?

textareaの幅を親の100%に拡大するには?

私は幅100%を試してみましたが、それはどのようなクラッシュレイアウトページの100%に展開され、動作しません。

ここでは、視覚的な方法で質問。

ヒントをください。

質問へのコメント (4)
ソリューション


<div>
<div style="width:20%; float:left;">
 <p>Some Contentsssssssssss</p>
</div>
<div style="float:left;width:80%;">
 <textarea style="width:100%;">
解説 (2)

「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="">
解説 (2)

ボックスモデルは、すべての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; }

解説 (1)

HTML:


<div id="left"></div>
<div id="content">
        <textarea cols="2" rows="10" id="rules">
解説 (3)

私ならこうする:

HTML:

<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;
}
解説 (8)

これを試してみてください。


textarea
{
width:100%;
}
解説 (3)

cssを追加する


    textarea
    {

        border:1px solid #999999
        width:99%;
        margin:5px 0;
        padding:1%;
    }
解説 (3)