0
私はこのコードを持っています。<div class="chat_container>はスクロールの高さを変更して、スクロールの高さを変えて内側の要素が決して後退しないようにします。要素の流れが限界を超えているオーバーフロー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>