Styling issues for chat function - html

Question

I have made a app for iOS that includes a chat function.
now i have several issues. you can see two screenshots, 1 with the keyboard up and one with the keyboard down. The one with the keyboard up has several issues as you might notice: the input box is way too high located, the header has just gone up, and there is a 'done' bar that i'd like to get rid of.
The code:
https://jsfiddle.net/92b50e4s/
body {
margin:0px;
padding:0px;
background-color:#FFF;
}
#header_holder {
display:inline-block;
height:40px;
width:100%;
float:left;
position:relative;
}
#header_container {
display:inline-block;
float:left;
width:100%;
height:40px;
background-color:#e6007e;
background-color:#F4F4F4;
text-align:center;
padding:0px 0px 0px 0px;
position:fixed;
top:0px;
left:0px;
z-index:700;
}
#header_container #settings {
position:absolute;
left:10px;
top:10px;
height:30px;
width:30px;
color:#FFF;
color:#333;
line-height:30px;
font-size:20px;
}
#header {
display:table;
width:auto;
height:40px;
line-height:40px;
margin:auto;
}
#header span {
color:#FFF;
color:#333;
display:inline-block;
float:left;
width:auto;
font-family:'Open Sans', sans-serif;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
font-family: 'Permanent Marker', cursive;
height:40px;
line-height:40px;
font-size:17px;
margin-left:-2px;
font-weight:400;
font-style:italic;
}
#header {
display:inline-block;
float:left;
width:100%;
height:40px;
position:relative;
}
#header #back_button {
position:absolute;
width:40px;
height:40px;
line-height:40px;
font-size:30px;
left:0px;
display:inline-block;
text-align:center;
float:left;
top:0px;
}
#header #back_button.hover {
color:#ba6e6f;
}
#header #header_content {
display:table;
width:auto;
height:40px;
line-height:40px;
color:#333;
font-family:'Open Sans', sans-serif;
font-size:15px;
margin:auto;
}
#content {
font-family:'Open Sans', sans-serif;
padding:0px 0px 60px 0px;
}
#message {
display:inline-block;
float:left;
width:100%;
height:auto;
position:fixed;
bottom:0px;
left:0px;
border-top:1px solid #ccc;
background-color:#FFFFFF;
}
#message #message_input {
display:inline-block;
float:left;
width:75%;
min-height:50px;
height:auto;
padding:1px 1% 1px 1%;
margin:2px 1% 2px 1%;
border:1px solid #ccc;
border-radius:5px;
font-size:16px;
font-family:'Open Sans', sans-serif;
outline:none;
-webkit-appearance:none;
}
#message #message_send2 {
display:inline-block;
float:right;
width:20%;
height:40px;
text-align:center;
line-height:40px;
transition: all .1s ease-in-out;
position:relative;
}
#message #message_send {
position:absolute;
top:50%;
margin-top:-8px;
width:20%;
right:0px;
text-align:center;
}
#message #message_send.hover {
color:#ba6e6f;
}
#content .message {
display:inline-block;
width:auto;
max-width:65%;
height:auto;
line-height:20px;
background-color:#ECECEC;
border-radius:5px;
padding:5px 2% 5px 2%;
clear:both;
color:#333;
}
#content .message.user {
float:right;
margin:7px 10px 7px 0px;
border-bottom-right-radius:0px;
}
#content .message.connection {
float:left;
margin:7px 0px 7px 10px;
border-bottom-left-radius:0px;
border-bottom:1px solid #D4A5A6;
}
#content .message .content {
display:inline-block;
float:left;
width:auto;
height:auto;
font-size:13px;
}
#content .message .time {
display:inline-block;
float:right;
width:auto;
height:auto;
font-style:italic;
margin:0px 0px 0px 5px;
font-size:10px;
}
What to do to solve these issues?