gpt4 book ai didi

html - 元素流落后限制响应溢出 div

转载 作者:行者123 更新时间:2023-11-28 03:28:07 24 4
gpt4 key购买 nike

我有这段代码,我想要 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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com