jQuery / CSS：即使自动溢出也可以调整100％的div高度

Question

http://jsfiddle.net/34tuuq2o/

即使我将overflow-y设置为auto并给div设置了一个高度，div也会重新调整大小（尽管这个高度不会出现在firebug DOM查看器中 ）。

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

另外，我是否需要设置容器的height: 90%; （ 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 height: 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> 

Answer 2

别问我怎么了，我只是尝试了一下，但是这行得通： http : //jsfiddle.net/o6d3644L/

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block" id="chatDiv"> <div class="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 3

让我们从减少HTML标记开始。

我们需要：

• 一个聊天包装器，用于保留聊天元素-类为.chat

• 我们聊天的对话-该课程是.conversation ，它将滚动

• 输入-该类是.input

要很好地显示我们的聊天窗口：

• html,body { height: 100%; } html,body { height: 100%; }允许元素有一个百分比高度

• .chat的高度为50％（在html，body上为100％的高度）

• 聊天的子级（ .conversation ）的高度为其父级.chat高度的90％，输入div的其余部分为10％

• overflow-y: scroll隐藏.conversation的溢出并显示滚动条。

CSS / HTML /演示

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

 * { margin: 0; padding: 0; } html, body { height: 100%; } .chat { height: 50%; } .conversation { background-color: #F2D9AA; background-color: rgba(242, 217, 170, 1); font: 18px serif black; height: 90%; overflow-y: scroll; } .input { background-color: #F2D9AA; background-color: rgba(242, 217, 170, 1); border-top: solid 1px #AD8539; padding: 10px; height: 10%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="chat"> <div class="conversation"></div> <div class="input"> <input type="text" class="chat-input" /> <button type='button'>Append</button> </div> </div>