Простая компоновка CSS для приложения чата

Question

Я хочу выполнить, казалось бы, простой макет div для основного приложения чата и уже много раз пробовал несколько вещей, но ни один из них не работал для этого макета.

Вот идея:

В то время как красные снизу ввод текста часть, а правый список пользователей часть должны быть закреплены в местах их расположений и фиксированного размера, часть центра синего содержания должна заполнить оставшуюся пространство.

Часть содержимого и часть списка пользователей должны прокручивать (зеленый) их содержимое по вертикали, если необходимо, но не должно быть полосы прокрутки для всего веб-сайта.

И важно: Весь сайт должен автоматически заполнить размер окна браузера.

В основном это сводится к тому, что столбики и строки «заполнять оставшееся пространство» и «фиксированный размер» смешиваются, что легко возможно в среде, в которой я обычно кодирую (XAML).

Использование функций, которые несовместимы со старыми браузерами или даже Javascript как (очень) последнее средство, было бы приемлемым. Но я не хочу использовать таблицы.

Редактировать: Вот мой текущий код. На данный момент я только пытался решить это для области контента и ввода. Это приводит к тому, что область ввода (правильно) всегда находится внизу, но область содержимого по-прежнему занимает всю высоту «позади» области ввода. (Установка переполнения и высоты на messageContainer вместо на outerContainer не поможет.)

<div id="outerContainer"> 
    <div id="messageContainer"> 
     <ul id="messageList"></ul> 
    </div> 

    <div id="inputContainer"> 
     <input type="text" id="msg"/> 
     <button class="btn" id="broadcast">send</button> 
    </div> 
</div> 

и

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%; 
} 

Любые идеи?

Спасибо! Andrej

Answer 1

DEMO

HTML:

<div id="wrapper"> 
    <div id="upperPanel"> 
     <div id="chat"> 
      <ul> 
       <li> 
        <span>Name:</span> 
        <span>tessadsda da das asd ad </span> 
       </li> 
       <li> 
        <span>Name:</span> 
        <span>tessadsda da das asd ad </span> 
       </li> 
       <li> 
        <span>Name:</span> 
        <span>tessadsda da das asd ad </span> 
       </li> 
      </ul> 
     </div> 
     <div id="friends"> 
      <ul> 
       <li> 
        <span>fRIEND:</span> 
       </li> 
       <li> 
        <span>fRIEND:</span> 
       </li> 
       <li> 
        <span>fRIEND:</span> 
       </li> 
       <li> 
        <span>fRIEND:</span> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div id="bottomPanel"> 
     <textarea> 
     </textarea> 
     <input type="submit" value="send" /> 
    </div> 
</div>​​​​​​​​​​​​​ 

CSS:

html,body{ 
    width:100%; 
    height:100%; 
} 

body{ 
    position:relative; 
} 

#wrapper{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    border:1px solid #333;  
} 

#upperPanel{ 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:100px; 
} 

#chat{ 
    position: absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:200px; 
    background:#666; 
    overflow:auto;  
} 

#friends{ 
    position: absolute; 
    top:0; 
    bottom:0; 
    width:200px; 
    right:0; 
    background:#999; 
    overflow:auto; 
} 

#friends ul{ 
    text-align:right; 
} 

#bottomPanel{ 
    height: 100px; 
    background:#EEE; 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    right:0px; 
} 

#bottomPanel textarea{ 
    position:absolute; 
    top:10px; 
    bottom:10px; 
    left:10px; 
    right:120px; 
    resize: none; 
} 

#bottomPanel input[type=submit]{ 
    position:absolute; 
    top:10px; 
    bottom:10px; 
    right:10px; 
    width:100px; 
} 

Answer 2

Как насчет этого?

<style type="text/css"> 
#left { 
    height: 1px; 
} 
#left div { 
    border: 1px solid blue; 
    height: 100%; 
    overflow: auto; 
} 

#right { 
    width: 100px; 
} 
#right div { 
    border: 1px solid red; 
    height: 200px; 
    overflow: auto; 
} 

#bottom div { 
    border: 1px solid red; 
    width: 400px; 
    height: 100px; 
} 
</style> 

<table> 
    <tr> 
     <td id="left"> 
      <div> 
       asdfsadf<br />asdf<br /><br /><br />sadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfs<br /><br /><br /><br /><br />adf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br /> 
      </div> 
     </td> 
     <td id="right"> 
      <div> 
       asdfsadf<br />asdf<br /><br /><br />sadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfs<br /><br /><br /><br /><br />adf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br /> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td id="bottom" colspan="2"> 
      <div></div> 
     </td> 
    </tr> 
</table> 

Редактировать: Поскольку таблицы не будут делать, вот еще одно решение (Javascript). Используя jQuery, сценарий очень прост (без jQuery это тоже не сложно, но jQuery портит меня, так вот что я получил). Не могу думать о каких-либо других решениях, которые не используют Javascript.

<style type="text/css"> 

#wrapper { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    margin: 0px; 
} 

#left { 
    border: 1px solid blue; 
    overflow: auto; 
} 

#right { 
    border: 1px solid red; 
    overflow: auto; 
    width: 100px; 
} 

#bottom { 
    border: 1px solid red; 
    height: 100px; 
    width: 100%; 
} 
</style> 

<div id="wrapper"> 

    <div id="left">lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd lefta s d f asdf asdf asd</div> 

    <div id="right"> 
     asdfsadf<br />asdf<br /><br /><br />sadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfs<br /><br /><br /><br /><br />adf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br />asdfsadf<br /> 
    </div> 

    <div id="bottom">bottom</div> 

</div> 

<script> 
    $(function(){ 
     var updateLayout = function() { 
      $('#left').css({ 
       position: 'absolute', 
       top: 0, 
       left: 0, 
       width: $('#wrapper').innerWidth() - $('#right').outerWidth(), 
       height: $('#wrapper').innerHeight() - $('#bottom').outerHeight() 
      }); 
      $('#right').css({ 
       position: 'absolute', 
       top: 0, 
       left: $('#left').outerWidth(), 
       height: $('#wrapper').innerHeight() - $('#bottom').outerHeight() 
      }); 
      $('#bottom').css({ 
       position: 'absolute', 
       top: $('#left').outerHeight(), 
       left: 0 
      }); 
     }; 

     updateLayout(); 

     $(window).resize(function() { 
      updateLayout(); 
     }); 
    }); 
</script> 

Answer 3

Посмотрите на это и посмотрите, нравится ли вам это. Концепция крепится к основанию с позиционированием. Fiddle