个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有这段代码，我想要 div <div class="chat_container>调整滚动条的大小和高度，使里面的元素永远不会落后，你能帮我吗？
你可以算出 <li>由于屏幕尺寸而消失。
您可以通过调整 fiddle 的大小来检查问题。
*{
padding:0;
margin: 0;
border:0;
overflow:hidden !important;
}
.navbar {
height: 50px;
width: 100%;
position: fixed;
background-color: #e67e22;
z-index: 1000;
}
.friendlist {
width: 15%;
background-color: #eee;
height: 100%;
position: absolute;
float: left;
}
.menu {
background-color: yellow ;
width: 85%;
margin-left: 15%;
height: 50px;
margin-top: 50px;
}
.chat_container{
overflow-y: scroll !important;
width: 85%;
height: 69%;
background-color: red;
position: absolute;
margin-left: 15%;
}
.texto {
position: absolute;
margin-left: 15%;
width: 85%;
height: 12.1%;
background-color: green;
bottom: 50px;
}
footer {
bottom: 0;
position: fixed;
width: 100%;
height: 50px ;
background-color: #e67e22;
}<!DOCTYPE html>
<html>
<head>
<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">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
</div>
<div class="friendlist">
</div>
<div class="menu">
Rafael<br>
00:15
</div>
<div class="chat_container">
<ol>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
<li>ddsadsadassaddsa</li>
</ol>
</div>
<div class="texto">
</div>
<footer>
Interact
</footer>
</body>
</html>最佳答案
如果我理解正确的话，问题的原因是高度的混合单位 px 和 %。
您可以使用 calc 来修复它。
类似于:
.chat_container{
...
height: calc(85% - 50px);
...
}
.texto{
...
height: calc(15% - 50px);
...
}
关于html - 元素流落后限制响应溢出 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44876158/
24
4
0
我是一名优秀的程序员,十分优秀！