Databases
StackOverflow2013
Postsdbo
POSimple CSS layout for chat app
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSimple CSS layout for chat app
    text
    copied!<p>I want to accomplish a seemingly simple div layout for a basic chat application and tried multiple things already, but none of them worked for this layout.</p> <p>Here's the idea: <img src="https://i.stack.imgur.com/Q1J1N.png" alt="chat layout"></p> <p>While the red bottom text-input part, and the right userlist part are supposed to be fixed at their location and of fixed size, the center blue content part should fill the remaining space. </p> <p>The content part and the userlist part are supposed to scroll (green) their content vertically if needed, but there should be no scrollbar for the whole website.</p> <p>And important: <strong>The whole website should automatically fill the size of the browser window.</strong></p> <p>It basically boils down to having columns and rows of "fill remaining space" and "fixed size" mixed, which is easily possible in the environment I usually code in (XAML).</p> <p>Using features that aren't compatible with old browsers or even Javascript as (very) last resort would be acceptable. <strong>But I don't want to use tables</strong>.</p> <p>Edit: Here's my current Code. At the moment I only tried to solve this for content and input area. This results in the input area (correctly) always being at the bottom, but the content area still occupying the whole height "behind" the input area. (Setting overflow and height on the messageContainer instead on the outerContainer doesn't help.)</p> <pre><code>&lt;div id="outerContainer"&gt; &lt;div id="messageContainer"&gt; &lt;ul id="messageList"&gt;&lt;/ul&gt; &lt;/div&gt; &lt;div id="inputContainer"&gt; &lt;input type="text" id="msg"/&gt; &lt;button class="btn" id="broadcast"&gt;send&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and</p> <pre><code>body { padding: 0px; margin: 0px; overflow: hidden; } #outerContainer { text-align: center; margin-left: 32px; margin-right: 0px; overflow:auto; height: 100%; } #messageContainer { text-align: left; margin-top: 32px; margin-bottom: 72px; } #inputContainer { position:fixed; bottom:0px; margin-bottom: 32px; margin-left: 0px; margin-right: 32px; width: 100%; } </code></pre> <p>Any ideas?</p> <p>Thanks! Andrej</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload