Question

我有一个带标题的聊天模板（聊天用户列表，我不知道标题的高度，它取决于人数，因此固定高度不是交易）和页脚（消息textarea字段）。在那两个div之间我想要发送消息。使用display：table for parent和display：table-row（页眉和页脚高度为1px）仅适用于webkit浏览器，firefox和IE忽略它。有一个example。是否有办法在所有浏览器（webkit，firefox，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

我不了解你的全部内容，但我希望我能接近解决你的问题。

Live View Solution

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

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

NB： 支持所有浏览器。

Answer 3

<强> @Iworb

看看：

解决您的问题使用简单的 jQuery 功能。我希望它支持所有浏览器。

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

带有页眉和页脚的可滚动div

3 个答案: