left: 100%; がはみ出さないようにしたい。

Question

JQuery初心者です。
ランダムな位置に吹き出しが表示される、というプログラムを作っています。
このコードには問題があり、たとえば、.fukidashiがleft: 100%;やtop: 100%となった場合、要素が画面からはみ出してしまいます。
left: 100%;やtop: 100%;がはみ出さず、ちょうど画面の右端に来るようないいアイデアはないでしょうか。
出来れば、幅を変えても対応できるようにしてほしいです。

<div id="chat">
  <!-- PHPで複製(30個ほど) -->
  <div class="fukidashi"><!-- 略 --></div>
  <div class="fukidashi"><!-- 略 --></div>
</div>

#chat{
  width: 100%;
  height: 100%;
}
.fukidashi{
  position: absolute;
}
/*
画面もwidth,height100%です。
吹き出しの幅は200pxに設定しています。
*/

$(document).ready(function(){
  $('#chat .fukidashi').each(
    function(randompos){
       var left = Math.floor(Math.random() * 100);
       var top = Math.floor(Math.random() * 100);
       $(this).css('left',left + '%');
       $(this).css('top',top + '%');
    }
  )
});

Answer 1

position: relative; が #chat にあるものとして

#chat {
  position: relative;
  width: auto;
  margin-right: 200px;
}

Answer 2

widthの幅は、ボックスモデルで言うcontentのみにかかる数値です。
ですので、chatより上の要素でmarginやpaddingが指定されていた場合は
その分はみ出してしまいます。
chat要素に対して
box-sizing:border-box
↑これをcssプロパティにつけてあげてみてください。

http://www.htmq.com/css3/box-sizing.shtml
一応参照URL置いておきます

Comments

[退会済みユーザー]

解答ありがとうございます。
質問ですが、padding: 0; margin: 0; でも要素の幅ちょうど一個分はみ出てしまいます。
(要素の左端がウィンドウの右端に来る)
この場合の対応策はないでしょうか。

[mepon]

すみません、見落としていました。
left:100%であれば要素の開始位置が100%なのではみ出ますね。
.fukidashiの出現位置（leftとか）を算出しているプログラムを修正できるのであれば
calcを使用するのが良いと思います。
left:calc(100% - 200px)これで恐らく正しく右端に収まるはずです。
calcの意味や使い方は調べてみてください。

[退会済みユーザー]

そうすると0%の時に左にはみ出て難しいものです。

[退会済みユーザー]

解決しました。
calcはheightの方に利用させていただきました。
ありがとうございました。