如何使用浏览器的全高度分别滚动2个div
jee*_*kay 4 html css html5 scroll
我有两个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>
您应该使用视口单元而不是直接百分比:
.column {
height: 100vh; /* percent relative to viewport height */
width: 50%;
float: left;
overflow: scroll;
}
以下是您要完成的工作示例.