元素流动限制resposive overflow div
问题描述：
我有这段代码，我希望div <div class="chat_container>调整大小并改变滚动的高度，这样里面的元素永远不会落后，你能帮我吗？元素流动限制resposive overflow div
正如你可以计算出<li>由于屏幕大小而消失。
您可以通过调整小提琴的大小来检查问题。
*{
\t padding:0;
\t margin: 0;
\t border:0;
\t overflow:hidden !important;
}
.navbar {
\t height: 50px;
\t width: 100%;
\t position: fixed;
\t background-color: #e67e22;
\t z-index: 1000;
}
.friendlist {
\t width: 15%;
\t background-color: #eee;
\t height: 100%;
\t position: absolute;
\t float: left;
}
.menu {
\t background-color: yellow ;
\t width: 85%;
\t margin-left: 15%;
\t height: 50px;
\t margin-top: 50px;
}
.chat_container{
\t overflow-y: scroll !important;
\t width: 85%;
\t height: 69%;
\t background-color: red;
\t position: absolute;
\t margin-left: 15%;
}
.texto {
\t position: absolute;
\t margin-left: 15%;
\t width: 85%;
\t height: 12.1%;
\t background-color: green;
\t bottom: 50px;
}
footer {
\t bottom: 0;
\t position: fixed;
\t width: 100%;
\t height: 50px \t ;
\t background-color: #e67e22;
}<!DOCTYPE html>
<html>
<head>
\t <title>Maquete</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
\t <link href="style.css" rel="stylesheet">
</head>
<body>
\t <div class="navbar">
\t </div>
\t <div class="friendlist">
\t </div>
\t <div class="menu">
\t \t Rafael<br>
\t \t 00:15
\t </div>
\t <div class="chat_container">
\t \t <ol>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t \t <li>ddsadsadassaddsa</li>
\t \t </ol>
\t </div>
\t <div class="texto">
\t </div>
\t <footer>
\t \t Interact
\t </footer>
</body>
</html>
答
如果我理解正确的话的问题的原因是在高度混合单元像素和％。
您可以使用calc来修复它。
喜欢的东西：
.chat_container{
...
height: calc(85% - 50px);
...
}
.texto{
...
height: calc(15% - 50px);
...
}