私はチャットのテンプレートを持っています（チャットユーザーのリストヘッダーの高さは人数に依存するので固定高さは取引ではありません）とフッターメッセージテキストエリア）。その2つのdivの間にメッセージを配置したい。 display：parentとdisplayのテーブルを使う：headerとfooterの1pxの高さを持つtable-rowは、webkitブラウザ、firefox、IEではうまく動作しません。 exampleがあります。すべてのブラウザ（webkit、firefox、IE8 +）で動作するようにする方法はありますか？ヘッダーとフッターでスクロール可能なdiv
フレックスボックスとcalcプロパティは、古いブラウザのサポートのために使用できません。
*{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>_itは人数に依存するので、静的な高さでヘッダーを使用する方法はありません。したがって、固定された高さは取引ではありません。 – Iworb
@Iworb
私はあなたの完全な事を理解していないですが、私は、私はあなたの問題を解決するために近い思いを願っています。
あなたは使用することで、このCSSを問題を解決することができます。
.messages-wrapper .messages-panel #messages-form {
display: table-row;
height: auto;
position: absolute;
bottom: -15px;
background: #F5F5F5;
width: 100%;
}
NB：それはすべてのブラウザをサポートいます。
これはチャットの完全なコードで、iframeウィンドウで開きます。私はあなたのソリューションを[source]（http://jsbin.com/nikedu/edit?html,css,output）に実装しましたが、何も変わりませんでした。 Firefoxはまだスクロールしていないメッセージでdivと同じように見えますが、フォームが表示されます。 – Iworb
@Iworbありがとう私はあなたの更新を得た。 このスタイルも 'width：100％; ' –
それからあなたは何かを見ることができます。 –
@Iworb
だけ見てみましょう：
は、単純なjQueryの機能を利用して、あなたの問題を解決しました。 すべてのブラウザに対応していますので、願っています。
var clientHeight = $(window).height();
var z = clientHeight - '40';
var c = clientHeight - '150';
$('.conversations-list').css('max-height', z);
$('.messages-container').css('max-height', c);
Microsoftはそれを支える停止したとき、あなたはまだIE8をサポートしている任意の理由は？ – Pete
はい、私はこのチャットを使用する弱いコンピュータ（ボード上のWindows XPでも）のためにいくつかの理由があります。 – Iworb