即使我将 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>
最佳答案
你需要修改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>
关于查询/CSS : 100% height div resizes even though overflow is auto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26091677/