CSS chat layout not working -

Hello I'm trying to create an online chat application.

I have html:

   & Lt; / Form & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; / Body & gt;  

and CSS:

  html, body {height: 100%; Maximum height: 100%; Hidden flurry; } Table {height: 100%; } TB {Overflow: Auto; Width: 100%; } Threads & gt; Tr, tbody {display: block; }  

---

I want to lie in the bottom of the page to be the second tag (a form in it) and the first page First of all to fill upwards.

---

Right now I have to use jquery (in what way) what do I want Currently this form is half hidden I want to do this with CSS so that it works better with mobile devices. How can I go about doing this?

Jquery:

  var heighty = $ (window). height (); Var height = $ ('. Farmhit'). Height (); $ (". Scroll"). CSS ("height", height - height + "px");  

---

I can not even get form text input 100% width for my life

---

please see < / H1>

---

I'm open to other ways of collecting this chat app together!

This is possible in CSS, but it will be very hard to work in all browsers. Instead, my recommendation is:

• Create an element, which fills 100% height with a bottom padding set in X PX.
• Create an element with the position: fixed and height of x px.
• Enter a z-index: 2 element after the first one and z-index: 1 . The z-index is not required to be assigned manually, the elements below the source code are automatically high priority and are displayed on the previous elements (if they overlay the eye).

If you want, you can use a different unit. Parsens are easy because you can add them up to 100%, so there is no need for a margin. Of course everyone has their own flaws, but what I have described in my experience is usually good consistency and is displayed comparatively on all devices.

You can also use CSS @ media questions to change the height of X for different devices.