TEXTAREA幅：ここで絶対位置

Question

の場合には動作しない100％私が使用しているコードで、

HTML

<div class="chatbrd"> 
    <div class="newmsg"> 
    <form action="" method="post"> 
    <textarea placeholder="type a message" type="text" name="msg" > 
    </textarea> 

    <button type="submit" name="newmsg" value="submit">send</button> 
</form> 
    </div> 
</div> 

CSS

.chatbrd 
{ 
height:800px; 
position:relative; 
overflow:auto; 
max-height:200px; 
border:1px solid black 
} 

.newmsg 
{ 
position:absolute; 
bottom:0; 
    max-width:600px; 

} 
.newmsg textarea 
{ 
width:100%; 

} 

はhere jsfiddle

を参照してくださいIテキストエリアの幅が外側のdivの幅と等しくなるようにしたい bu私はくっついた。

Answer 1

親を与える必要がありますwidth: 100%;これはまだmax-width: 600pxに従います。これは、子テキスト領域が何を取るのかを知る必要があるからです。100%の幅です。

JS Fiddle

.newmsg { 
    position:absolute; 
    bottom:0; 
    max-width:600px; 
    width: 100%; 
} 

Answer 2

この

.newmsg 
{ 
position:absolute; 
bottom:0; 
/* max-width:600px; */ 
    width:100%; 

} 

.chatbrd 
 
{ 
 
height:800px; 
 
position:relative; 
 
overflow:auto; 
 
max-height:200px; 
 
border:1px solid black 
 
} 
 

 
.newmsg 
 
{ 
 
position:absolute; 
 
bottom:0; 
 
/* max-width:600px; */ 
 
    width:100%; 
 

 
} 
 
.newmsg textarea 
 
{ 
 
width:100%; 
 

 
}

<div class="chatbrd"> 
 
    <div class="newmsg"> 
 
    <form action="" method="post"> 
 
    <textarea placeholder="type a message" type="text" name="msg" > 
 
    </textarea> 
 

 
    <button type="submit" name="newmsg" value="submit">send</button> 
 
</form> 
 
    </div> 
 
</div>