0
我有這段代碼,我希望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>