2016-08-23 19 views
0

の場合には動作しない100%私が使用しているコードで、TEXTAREA幅:ここで絶対位置

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私はくっついた。

+1

https://jsfiddle.net/d7dyuf1k/2/ – Hackerman

答えて

5

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

JS Fiddle

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

側の注意点としては、 'テキストエリアをお試しください'が全幅に渡っているので、コンテナのオーバーフローが起こります。 100%を超えています。これは '.newmsg textarea'ルールに' box-sizing:border-box; 'を追加することで修正できます。 – BDawg

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>

+0

はいそれは動作していますが、私は 'div.newmsg'の' max-width:600' –