diff --git a/lib/static/template.html b/lib/static/template.html
index 70c55ba..e4eb03e 100644
--- a/lib/static/template.html
+++ b/lib/static/template.html
@@ -11,13 +11,13 @@
   <div id="container">
     <div id="chat" class="chatPanel normalPanel">
       <div class="chatContainer" style="min-height:100%;">
-        <div class="chatMainPanel" id="chatMainPanel" style="height:100%;">
-          <div class="chatTitle">
+        <div class="chatMainPanel" id="chatMainPanel" style="padding-top:40px;">
+          <div class="chatTitle" style="margin-top: -40px;">
             <div class="chatNameWrap">
               <p class="chatName" id="messagePanelTitle">{talker}</p>
             </div>
           </div>
-          <div class="chatScorll" style="height: 95%; overflow-y: scroll; position: relative; font-family:initial;">
+          <div class="chatScorll" style="height: 100%; overflow-y: scroll; position: relative; font-family:initial;">
             <div id="chat_chatmsglist" class="chatContent" style="position: absolute;">
               {messages}
             </div>
@@ -27,6 +27,7 @@
     </div>
   </div>
   <script type='text/javascript'>
+    // avoid repeatly inserting the same base64 img into html
     var chats = document.getElementsByClassName('me');
     for (var k = 0; k < chats.length; k ++) {{
       var avt = chats[k].getElementsByClassName('avatar')[0];
diff --git a/lib/static/wx.css b/lib/static/wx.css
index 1539dd8..c7e0de0 100644
--- a/lib/static/wx.css
+++ b/lib/static/wx.css
@@ -2492,10 +2492,6 @@ a.chatSend b {
   text-align: center;
 }
 .chatPanel .chatMainPanel {
-  position: absolute;
-  /*
-   *width: 100%;
-   */
   border-radius: 2px 2px 6px 6px;
 }
 .chatPanel .chatOperator a.chatSend:active b {