Scrollbare div mit Kopf- und Fußzeile

Question

Ich habe eine Chat-Vorlage mit Header (Liste der Chat-Benutzer, Ich weiß nicht Höhe der Header, es hängt von Menschen zählen, so feste Höhe ist kein Deal) und Fußzeile (Feld Nachrichtentext). Zwischen diesen beiden divs möchte ich Nachrichten platzieren. Verwenden von display: Tabelle für Eltern und Anzeige: Tabellenzeile mit 1px Höhe für Kopf- und Fußzeile funktioniert nur gut in Webkit-Browsern, Firefox und IE ignorieren dies. Es gibt eine example. Gibt es eine Möglichkeit, das Arbeitsverhalten bei allen Browsern (Webkit, Firefox, IE8 +) zu verbessern?

Flexboxes und die calc-Eigenschaft können aufgrund der alten Browser-Unterstützung nicht verwendet werden.

Answer 1

*{margin:0; 
 
\t padding:0; 
 
\t } 
 
body{ 
 
\t background:#fff; 
 
\t position:absolute; 
 
\t width:100%; 
 
\t height:100%; 
 
\t } 
 
.main{ 
 
\t background:#0C0; 
 
\t height:100%; 
 
\t padding:60px 0 40px; 
 
\t box-sizing:border-box; 
 
\t } 
 
.header{ 
 
\t background: #0FC; 
 
\t position:absolute; 
 
\t width:100%; 
 
\t height:60px; 
 
\t } 
 
.left{ 
 
\t background:#3CC; 
 
\t float:left; 
 
\t width:250px; 
 
\t height:100%; 
 
\t overflow:scroll; 
 
\t } 
 
.right{ 
 
\t background:#9F3; 
 
\t height:100%; 
 
\t overflow:scroll; 
 
\t } 
 
.footer{ 
 
\t background:#9F9; 
 
\t position:absolute; 
 
\t bottom:0; 
 
\t width:100%; 
 
\t height:40px; 
 
\t }

<div class="header"></div> 
 
<div class="main"> 
 
    <div class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 
    <div class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 
</div> 
 
<div class="footer"></div>

Answer 2

@Iworb

Ich verstehe ich nicht Ihre vollständige Sache, aber ich hoffe, ich bin in der Nähe Ihr Problem zu lösen.

Live View Solution

Sie können diese CSS Problem durch die Verwendung lösen:

.messages-wrapper .messages-panel #messages-form { 
    display: table-row; 
    height: auto; 
    position: absolute; 
    bottom: -15px; 
    background: #F5F5F5; 
    width: 100%; 
} 

NB: Es alle Browser nicht unterstützt.

Answer 3

@Iworb

Werfen Sie einen Blick:

Gelöst Ihr Problem eine einfache jQuery Funktion Durch die Verwendung. Es wird alle Browser unterstützt, hoffe ich.

Live view

var clientHeight = $(window).height(); 
var z = clientHeight - '40'; 
var c = clientHeight - '150'; 
    $('.conversations-list').css('max-height', z); 

    $('.messages-container').css('max-height', c);