查询/CSS : 100% height div resizes even though overflow is auto

Question

http://jsfiddle.net/34tuuq2o/

即使我将 overflow-y 设置为 auto 并且我给了 div 一个高度，div 也会调整大小(尽管这个高度 没有出现在 Firebug 中DOM 查看器)。

如何让 div 激活滚动条而不是调整大小？

此外，我是否必须为容器设置高度(height: 90%;)？

$('[type=button]').click(function() {
  $('#chat').append("<p>text</p>");
});

.block {
  display: block;
}
#chatDiv {
  background-color: #F2D9AA;
  background-color: rgba(242, 217, 170, 1);
  font: 18px serif black;
  border-radius: 3px;
  width: 100%;
  max-height: 50%;
  min-height: 300px;
  position: relative;
  overflow: hidden;
}
#chatDiv > .container {
  height: 90%;
  margin-bottom: 10%;
}
#chat {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}
#chatInput {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  border-top: 1px solid #AD8539;
  margin: 0;
  padding: 0;
  width: 100%;
}
#chatInput .container {
  padding: 5px;
  margin: 0;
}
#chatInput[type=text] {
  width: 100%;
  border: none;
  background-color: transparent;
  font: 18px serif;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="block" id="chatDiv">
  <div class="block container">
    <div id="chat"></div>
  </div>
  <div class="block" id="chatInput">
    <div class="container">
      <input type="text" name="chatTI" />
    </div>
  </div>
</div>
<input type='button' value='append'></input>

Answer 1

你需要修改css，主要变化是:

设置html和body height: 100%

设置#chatDiv 高度:50%

设置.container position: absolute

试试这个:

$('[type=button]').click(function() {
  $('#chat').append("<p>text</p>");
});

body,
html {
  height: 100%;
}
.block {
  display: block;
}
#chatDiv {
  background-color: #F2D9AA;
  background-color: rgba(242, 217, 170, 1);
  font: 18px serif black;
  border-radius: 3px;
  width: 100%;
  height: 50%;
  min-height: 300px;
  position: relative;
  overflow: hidden;
}
#chatDiv > .container {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 40px;
}
#chat {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}
#chatInput {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  border-top: 1px solid #AD8539;
  margin: 0;
  padding: 0;
  width: 100%;
}
#chatInput .container {
  padding: 5px;
  margin: 0;
}
#chatInput[type=text] {
  width: 100%;
  border: none;
  background-color: transparent;
  font: 18px serif;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block" id="chatDiv">
  <div class="block container">
    <div id="chat"></div>
  </div>
  <div class="block" id="chatInput">
    <div class="container">
      <input type="text" name="chatTI" />
    </div>
  </div>
</div>
<input type='button' value='append'></input>