我在一行中有 2 个相邻的 div。我希望用户在内容溢出 div 时垂直滚动它们，并且我还想使用当前浏览器窗口的整个高度。
此处固定高度为 700px:
但是当我使用
height:auto;
或
height:100%;
没有单独的滚动。 (灰色的 div 下面有很多文字)它只有主滚动条，看起来像:
完整代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
html,body{
margin:0;
padding:0
}
#maintest {
float:left;
display:block;
overflow-y:auto;
height:100%;
width:700px;
background-color:grey;
}
#discussion {
float:none;
display:block;
overflow:auto;
height:100%;
width:auto;
background-color:#B0D1E1;
}
</style>
<body>
<nav>
<a href="test">testlink</a>
</nav>
<div id="maintest">
<?php include "text.html" ?>
</div>
<div id="discussion">
<?php include "text.html" ?>
</div>
</body>
</html>
最佳答案
你应该使用 viewport units而不是直接百分比:
.column {
height: 100vh; /* percent relative to viewport height */
width: 50%;
float: left;
overflow: scroll;
}
关于css - 如何使用浏览器的全高分别滚动 2 个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32169383/