Question

我有这个代码，我希望div <div class="chat_container>调整大小并改变滚动的高度，这样内部的元素永远不会落后，你能帮助我吗？

正如您所知，<li>因屏幕尺寸而消失。

您可以通过调整小提琴的大小来检查问题。

＆＃13;

*{
	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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

如果我理解正确，问题的原因是混合单位px和高度％。

您可以使用calc来修复它。

类似的东西：

.chat_container{
    ...
    height: calc(85% - 50px);
    ...
}

.texto{
    ...
    height: calc(15% - 50px);
    ...
}

元素流后面限制resposive溢出div

1 个答案: