フッターを画面の一番下に表示したい

こんにちは、
現在LineのようなWebアプリを作成しているのですが、
フッターが画面の下に表示されずに困っています。

ネットで調べたやり方でtryしましたが、
（cssでabsolute:0を指定）
うまくいきませんでした。
（表示した画面の下に出るけど、スクロール画面を動かすと上に行ってしまう。）

恐らく、
画面の一部をajaxで作成しているため、
動的にコンテンツが増えることで、
ブラウザ内部の表示位置の計算がずれているのだと思われます。

対応方法が分かる人がいましたら教えてください。

html
1html>
2  <header><script type="text/javascript" src="/js/footerFixed.js"></script> </header>
3<body>
4  <div>
5  <div id="line__container" class="line__container" ></div>
6  ↑ここがAjaxで要素がどんどん追加される
7</div>
8<footer id="footer">
9<div id="preview"></div>
10  <form action="chatMain.php" method="post" enctype="multipart/form-data">
11    <p>発言
12    <input name="ChatRoomID" id="ChatRoomID" value="<?php echo $GLOBALS["ChatRoomID"]; ?>" hidden="true" />
13    <input name="userID" id="userID" value="<?php echo $GLOBALS["userID"]; ?>"  hidden="true"/>
14    <input type="text" name="chatinfo" value=" ">
15    <label class="upload-label">送る
16        <input type="submit" name="_upload"　value="送る" >  
17    </label>
18    <label class="upload-label">画像
19        <input type="file" name="picture[]" id="picture" accept="image/*" multiple="multiple">  
20    </label>
21    </p>
22  </form>
23</footer>
24</body>
25</html>

css
1html {
2  background-color: #80dddd;  /* 両端部分に付ける背景色(黄緑色) */
3  background-image: url("WallSheat.jpg");/* 両端部分に付ける背景画像 */
4}
5body {
6  margin: 0px 15%;  /* 外側の余白を、上下はゼロで左右は画面横幅の15％に */
7  padding: 0px;     /* 内側の余白を消す */
8  background-color: lightsteelblue;  /* 本文部分の背景色は白色 */
9  
10}
11footer{
12  width: 100%;
13  position: absolute;/*←絶対位置*/
14  bottom: 0; /*下に固定*/
15}      
16