带页眉和页脚的可滚动div

Question

我有一个带有标题的聊天模板(聊天用户列表，我不知道页眉的高度，它取决于人的数量，所以固定的高度不是交易)和页脚(字段)。在这两个div之间，我想发消息。使用display: table表示父和显示:对于页眉和页脚有1px高度的表行只能在webkit浏览器中很好地工作，firefox和IE忽略了这一点。有一个示例。有没有办法在所有浏览器(webkit，火狐，IE8+)上进行工作行为？

由于旧浏览器支持，无法使用Flexboxes和calc属性。

Answer 1

​

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

<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

我不明白你的全部意思，但我希望我能解决你的问题。

实时视图解决方案

您可以通过使用此CSS解决问题：

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

NB:，It's 支持的所有浏览器。

Answer 3

@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);